整合營銷服務商
          
				
          電腦端+手機端+微信端=數據同步管理
          
			
          
			
          				
				
          免費咨詢熱線：
          			
			
          
		
          
	
          
		
	
	
	

          


          
	

          

 

          
  
          
    
          
      
          
        
          前端開發之CSS圖片水平、垂直居中顯示
          
        
           
          
	
	
          
		
                        
          過前端開發的朋友都知道，要使文字在一個div容器垂直居中顯示是很簡單的事，但是如果是要讓一張圖片在div容器中垂直顯示那就有點傷腦筋了，因為圖片是個置換元素，有些特殊的特性，對于前端開發的大牛來說還好，解決方法有很多，比如什么利用js啊之類的，但是這些對于初學者來說就有些難度了，今天小編就把自己平時在項目中用的方法分享給大家，給大家一個參考。
          其實小編用的方法也不是什么很高端的技術，算是最low的方法吧，但是很實用，能兼容各種瀏覽器，為了演示，小編直接從某寶商家店鋪里拿了一張商品圖來做演示，因為商品圖都是高清無碼的，且還很大，所以我們在CSS中把圖片的高度設置為200px，div容器的高度為300px，完整的代碼如下：
          最終的運行效果如下圖：
          可以看到，這個圖片在div中水平、垂直都是在正中間，是不是很完美。這個原理也很簡單，就是在div容器中加了個 <i> 標簽并把它的 display 屬性設置為 inline-block（行內塊元素），讓它去撐開div容器的高度，再把圖片的 vertical-align 屬性設置為 middle 就可以垂直居中了，當然這只是個演示，大家在實際的項目中可以利用 max-width、min-width、max-height、min-height 等屬性讓圖片根據需要自適應，以達到想要的效果。
          當然解決方法還有很多種，具體用什么方法需根據自身頁面布局去權衡，總之沒有最好的，只有最適合的，如果你有更好的方法也可以告訴小編哦，一起交流方法，共同進步。
          lexbox
          通常首選方法是使用flexbox居中內容。只需三行代碼即可：display:flex，然后使用 align-items:center 和 justify-content:center 將子元素垂直和水平居中。
          如下代碼：
          html：
          <div class="flexbox-centering">
  <div>Centered content.</div>
</div>
          css：
          .flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
          Grid
          使用grid(網格)與flexbox非常相似，也是一種常見的技術，尤其是布局中已經使用網格的情況下。與前一種flexbox技術的唯一區別是它顯示為柵格。
          如下代碼：
          html:
          <div class="grid-centering">
  <div class="child">Centered content.</div>
</div>
          css:
          上效果圖：
          這是一個用ext3.2.0、js、html、css寫的一個還算好看的登錄界面。
          源代碼已上傳，下載地址請點擊：點擊打開鏈接
          其主要難點在如何使用extjs來畫一個界面，接下來我們就主要看一下其中的html和js吧：

          2. <!DOCTYPE html>
          3. <html lang="en">
          4. <head>
          5.  <meta charset="UTF-8">
          6.  <title>登錄界面</title>
          7.  <link rel="stylesheet" type="text/css" href="ext3.2.0/resources/css/ext-all.css"/>
          8.  <script type="text/javascript" src="ext3.2.0/adapter/ext/ext-base.js"></script>
          9.  <script type="text/javascript" src="ext3.2.0/ext-all.js"></script>
          10.  
          11.  <script type="text/javascript" src="login.js"></script>
          12.  <script type="text/javascript" src="loginToDo.js"></script>
          13.  
          14.  <link rel="stylesheet" type="text/css" href="login.css"/>
          15. </head>
          16. <body onkeydown="keyLogin(event);">
          17. </body>
          18. </html>
          這里面主要是導入頁面所需的js和css文件，當然還有一個亮點就是body標簽上的 onkeydown事件屬性，主要用于監聽鍵盤實現我們js中的enter鍵提交功能。然后看一下extjs的語言風格吧：

          2. Ext.onReady(function () {
          3.  
          4.  // 創建“登錄”面板
          5.  var loginPanel = new Ext.Panel({
          6.  // 設置面板的位置、寬高、樣式
          7.  // 注意：此處我用的是相對布局relative（用于比較兩者的區別）
          8.  id: 'loginPan',
          9.  x: 363,
          10.  y: 0,
          11.  width: 396,
          12.  height: 480,
          13.  baseCls: '',
          14.  defaults: {
          15.  border: false
          16.  },
          17.  // 添加面板里面的物品
          18.  items: [
          19.  {
          20.  // 第一件：logo圖
          21.  id: 'loginLogo',
          22.  height: 160,
          23.  frame: false,
          24.  bodyStyle: 'padding-top:10px',
          25.  html: '<img src="images/fly_icon.png">'
          26.  },
          27.  {
          28.  // 第二件：登錄的表單
          29.  id: 'loginForm',
          30.  defaultType: 'textfield',
          31.  frame: false,
          32.  defaults: {
          33.  allowBlank: false
          34.  },
          35.  // 添加表單里面的物品：兩個輸入框
          36.  items: [
          37.  {
          38.  id: "username",
          39.  cls: "text_field",
          40.  inoutType: 'text',
          41.  width: 330,
          42.  height: 28,
          43.  blankText: '賬號不能為空',
          44.  emptyText: '請輸入賬號',
          45.  },
          46.  {
          47.  id: "password",
          48.  cls: "text_field",
          49.  inputType: 'password',
          50.  width: 330,
          51.  height: 28,
          52.  emptyText: '請輸入密碼',
          53.  blankText: '密碼不能為空',
          54.  }]
          55.  },
          56.  {
          57.  // 第三件：忘記密碼
          58.  id: 'loginForget',
          59.  html: "<a href='forget_pwd.html' target='_blank'>忘記密碼？</a>",
          60.  },
          61.  {
          62.  // 第四件：登錄按鈕
          63.  id: 'loginBtn',
          64.  html: '<button id="btn_login">馬上登錄</button>',
          65.  }
          66.  ],
          67.  });
          68.  
          69.  // 創建“注冊”面板
          70.  var registerPanel = new Ext.Panel({
          71.  // 設置面板的位置、寬高、樣式
          72.  // 注意：此處我用的是絕對布局absolute（用于比較兩者的區別）
          73.  id: 'registerPan',
          74.  x: 0,
          75.  y: 46,
          76.  width: 800,
          77.  height: 389,
          78.  baseCls: '',
          79.  layout: 'absolute',
          80.  defaults: {
          81.  border: false
          82.  },
          83.  // 添加面板里面的物品
          84.  items: [
          85.  {
          86.  // 第一件：標題
          87.  id: 'registerTitleLabel',
          88.  xtype: 'label',
          89.  x: 47,
          90.  y: 50,
          91.  text: '還沒有賬號？',
          92.  }, {
          93.  // 第二件：正文
          94.  id: 'registerContentLabel',
          95.  xtype: 'label',
          96.  x: 47,
          97.  y: 135,
          98.  text: '這是在注冊面板下面的正文內容。里面的內容可以隨便寫，比如當前我們再一個窗口下面建立了兩個面板。而兩個面板的布局是分別用相對布局和絕對布局來實現的。相比較而言，我覺得用絕對布局會簡單粗暴，更直接，更方便。總之，你們自己體會一下吧。',
          99.  }, {
          100.  // 第三件：注冊按鈕
          101.  id: 'registerBtn',
          102.  xtype: 'button',
          103.  x: 47,
          104.  y: 280,
          105.  html: '<button id="btn_register" >馬上注冊</button>'
          106.  }],
          107.  
          108.  });
          109.  
          110.  // 創建窗口，從而讓內容達到居中效果
          111.  var centerWindow = new Ext.Window({
          112.  baseCls: '',
          113.  width: 800,
          114.  height: 480,
          115.  layout: 'absolute',
          116.  closable: false,
          117.  draggable: false,
          118.  resizable: false,
          119.  shadow: false,
          120.  border: false,
          121.  items: [registerPanel, loginPanel],
          122.  });
          123.  
          124.  // 顯示窗口
          125.  centerWindow.show();
          126.  
          127.  // 添加瀏覽器縮放自動居中效果
          128.  Ext.EventManager.onWindowResize(function () {
          129.  centerWindow.center();
          130.  });
          131. });
          這里要說的是：1、注意給屬性加標記，能用id就用id，cls只是一個封裝過的class，和原生的class還是有區別的，比如給一個cls元素的height、padding定義樣式并不起作用。詳見：關于extjs中的cls ≠ class
          2、在ext中建議用絕對定位，由于它底層是一個個的table、div塊，如果用相對定位的話偶爾是有偏差的，所以還是絕對定位方便直接啊。
          3、window自帶居中效果，可以利用這一點讓元素在屏幕中居中。但是當瀏覽器縮放的時候，這個window并不會動，每次都需要重新刷新一下才會改變一下。所以，在以上代碼的最后我們用給這個centerWindow添加了一個窗口自適應居中的效果。
                              	
          
	
	

          

          

 
          
        
        
		  
      
          
      
      
          
    
          
  
          

          



 


			
		





          
  
          
    
  
          

          

          
	
          
		
		
		
          
	
          


          
 

 







主站蜘蛛池模板：
国产一区二区在线看|
中文字幕无码一区二区三区本日|
国产一区二区免费在线|
av无码免费一区二区三区|
少妇精品无码一区二区三区|
亚洲国产精品自在线一区二区
|
亚洲日韩精品一区二区三区无码|
怡红院AV一区二区三区|
日本一区二区三区高清|
一区二区三区高清|
久久国产精品视频一区|
精品中文字幕一区在线|
91一区二区视频|
国产激情无码一区二区三区|
一区二区三区91|
亚洲AV无码一区二区三区牲色|
日亚毛片免费乱码不卡一区
|
国产免费一区二区视频|
日韩人妻一区二区三区免费|
精品不卡一区中文字幕|
成人免费一区二区无码视频
|
bt7086福利一区国产|
老熟妇高潮一区二区三区|
男人免费视频一区二区在线观看|
国产成人无码AV一区二区在线观看|
香蕉视频一区二区|
麻豆视频一区二区三区|
国产一区二区三区91|
国产福利电影一区二区三区久久久久成人精品综合
|
久久毛片免费看一区二区三区|
成人精品视频一区二区|
波多野结衣在线观看一区|
中日av乱码一区二区三区乱码|
久久91精品国产一区二区|
亚洲av乱码一区二区三区按摩|
中文字幕乱码一区久久麻豆樱花|
中文字幕一区日韩在线视频|
一区二区三区四区在线观看视频|
国产麻豆剧果冻传媒一区
|
全国精品一区二区在线观看|
在线视频精品一区|