欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS解決頁面圖片水平垂直居中問題的方法

Airen的博客   發(fā)布時(shí)間：2016-03-10 11:27:50   作者：大漠   我要評(píng)論
這篇文章主要介紹了CSS解決頁面圖片水平垂直居中問題的方法,文中給出了三種方案而無需依賴JavaScript,需要的朋友可以參考下

做為一個(gè)前端設(shè)計(jì)人員，對(duì)于產(chǎn)品展示頁面的設(shè)計(jì)一定不會(huì)陌生，其中產(chǎn)品圖片擺放是必定經(jīng)歷的一步，并且水平居中和垂直居中又是最多的。有時(shí)需要產(chǎn)品圖片水平垂直居中顯示，這種展示用CSS來實(shí)現(xiàn)又是比較棘手的一件事，我想很多前端攻程師都有研究過或者說是搜索過這些方法吧。很多網(wǎng)站都是使用table來實(shí)現(xiàn)產(chǎn)品圖片垂直居中，實(shí)現(xiàn)也是相當(dāng)?shù)姆奖?，唯一不足之處就是結(jié)構(gòu)繁鎖，那么今天和大家一起看幾種不是使用talbe方法實(shí)現(xiàn)產(chǎn)品圖片水平垂直居中的方法。

圖片水平垂直居中存在的問題

所謂的圖片水平垂直居中就是把圖片放在一個(gè)容器元素中（容器大于圖片尺寸或是指定了大小的容器），并且圖片位居此容器正中間（中間是指元素容器的正中間），而圖片不是以背景圖片（background-image）形式展示，是以<img>元素形式展示的。如下圖所示：
2016310113055157.png (149×73)

大家都知道，如果其中img有明確的尺寸，并且圖片尺寸都是一致的，要實(shí)現(xiàn)其水平垂直居中一件非常容易的事情，我們只要像下面操作就能方便解決問題：

將圖片以塊元素方式顯示(display:block)；
給圖片指定明確的margin-left和margin-top值，而其中margin-left值等于圖片所在容器的寬度(imbBoxWidth)減去圖片本身寬度(imgWidth)的值的一半【margin-left=(imgBoxWidth-imgWidth)/2】;margin-top值和margin-left很類似，只是把相對(duì)應(yīng)的寬度值換成高度值,即【margin-top=(imgBoxHeight-imgHeight)/2】。
上面的方法是方便簡(jiǎn)單，但受限太大，比如說圖片不一樣時(shí)，用上面的方法實(shí)現(xiàn)就比較難，或許你會(huì)說給相圖尺寸的圖片定義一個(gè)類，然后在給他們指定不同的margin。但有很多情況下我們是無法使用這種方法來解決圖片水平垂直居中的問題，比如說有很多不同尺寸的圖片，而且圖片容器的單位和圖片大小單位不一致時(shí)，這樣我們就沒有辦法能計(jì)算出圖片與容器之間的margin是多少，此時(shí)解決圖片水平居垂直居中就相當(dāng)?shù)睦щy。換過來說，如果有什么辦法能讓不同尺寸的圖片實(shí)現(xiàn)水平垂直居中，那對(duì)于我們來說是多么有用的，又是多么方便的一件事。

解決問題——讓圖片水平垂直居中

解決水平居中是相當(dāng)?shù)娜菀?，如果圖片左浮動(dòng)并且"display:inline"時(shí)，我們只要給圖片設(shè)置一個(gè)"text-align:center"屬性，就順利解決了水平居中。

對(duì)于垂直居中的最佳解決方案，在現(xiàn)代瀏覽器中，我們可以給圖片容器設(shè)置“dipslay:table-cell;vertical-align:middle”, 這種方法能順利的讓圖片實(shí)現(xiàn)垂直居中，但只能在現(xiàn)代瀏覽器運(yùn)行，在IE6-7中無法正常運(yùn)。這樣一來是不是將無法實(shí)現(xiàn)呢？大家別急，我們一起來看下面的幾種方法：

1、table-cell加上display:inline

這種方法很神奇，前面我們說過用display-table和vertical-middle是在現(xiàn)代瀏覽器中實(shí)現(xiàn)圖片垂直居中是最佳辦法，只是IE6-7不支持display:table-cell，其實(shí)并不是那么嚴(yán)重，我們只要在IE6-7下給他來個(gè)另外的寫法。其實(shí)掌握了原理在IE下實(shí)現(xiàn)起來也并不難，下面我們一起先來看看這個(gè)思路：

首先在圖片的容器元素中設(shè)置“display:table-cell;vertical-align:middle;”實(shí)現(xiàn)現(xiàn)瀏覽器的垂直居中；
IE6-7有一個(gè)好的辦法，就是創(chuàng)建一個(gè)線盒，此線盒的高度和圖片容器的高度一樣，并且給這個(gè)線盒也設(shè)置“vertical-align:middle”。
接下來的關(guān)鍵是給IE6-7創(chuàng)建線盒，還好IE6-7下部分顯示支持“dipslay:inline-block”。這樣我們就可以在圖片的容器中創(chuàng)建一個(gè)空元素（比如說span），并且設(shè)置span的“display:inline-block;height:100%;vertical-align:middle”。

創(chuàng)建線盒中有一個(gè)細(xì)節(jié)需要注意，在IE6-7中空的line-block元素寬度為“0”，這樣在IE6-7下是沒有效果的，此時(shí)我們需要給span加上“width:1px”，此時(shí)會(huì)給水平居中造成1px的誤差，但這種bug你是可以接受得了的。

那么最終解決方案就是使用display:table-cell和設(shè)置了display:inline-block的線合span。當(dāng)然其中還是需要為IE寫一點(diǎn)特殊的代碼，接下來我們的起來看代碼：

HTML Markup

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <ul class="imgWrap clearfix">  
  2.  <li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>  
  3.  <li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>  
  4.  <li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>  
  5.  <li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>  
  6. </ul>  

  
CSS Code

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2.  .imgWrap li {   
  3.   float: left;   
  4.   border: solid 1px #666;   
  5.   margin: 10px 10px 0 0;   
  6.   list-style: none;   
  7.   border-collapse: collapse;    
  8.  }   
  9.  .imgWrap a {   
  10.   background: #ffa url(images/gridBg.gif) repeat center;   
  11.   width: 219px;   
  12.   height: 219px;   
  13.   display: table-cell;/*圖片容器以表格的單元格形式顯示*/  
  14.   text-align: center; /* 實(shí)現(xiàn)水平居中 */  
  15.   vertical-align: middle; /*實(shí)現(xiàn)垂直居中*/        
  16.  }   
  17.  .imgWrap a:hover {   
  18.   background-color: #dfd;   
  19.  }   
  20.  .imgWrap img {   
  21.   border: solid 1px #66f;   
  22.   vertical-align: middle; /*圖片垂直居中*/  
  23.  }   
  24.  </style>   
  25.  <!--下面是解決IE6-7的正常顯示的代碼-->   
  26.  <!--[if lt IE 8]>   
  27.   <style type="text/css">   
  28.   .imgWrap a {   
  29.    display: block;   
  30.   }   
  31.   .imgWrap span {   
  32.    display: inline-block;   
  33.    vertical-align: middle;   
  34.    height: 100%;   
  35.   }   
  36.   .imgWrap {   
  37.    _height: 0;   
  38.    zoom: 1;   
  39.   }   
  40.   </style>   
  41.  <![endif]-->  

  
效果
2016310113218344.png (300×73)

2、空白標(biāo)簽實(shí)現(xiàn)圖片的垂直居中

這種方法很有意思，也很有獨(dú)特之處，兼容各瀏覽器，代碼較第一種方法又簡(jiǎn)單很多，最主要的不要單獨(dú)給IE寫效果，而且易懂，下面一起看看這種方法吧。
HTML Markup

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <ul class="imgWrap clearfix">  
  2.  <li><a href="#" class="imgBox"><span></span><img src="images/img1.jpg" alt="" /></a></li>  
  3.  <li><a href="#" class="imgBox"><span></span><img src="images/img2.jpg" alt="" /></a></li>  
  4.  <li><a href="#" class="imgBox"><span></span><img src="images/img3.jpg" alt="" /></a></li>  
  5.  <li><a href="#" class="imgBox"><span></span><img src="images/img4.jpg" alt="" /></a></li>  
  6. </ul>  

  
CSS Code

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <style type="text/css">   
  2.  .imgWrap li{    
  3.   width: 219px;   
  4.   height: 219px;   
  5.   float: left;   
  6.   border: solid 1px #666;   
  7.   margin: 10px 10px 0 0;   
  8.   list-style: none;   
  9.   text-align: center;   
  10.   font-size: 0;   
  11.  }   
  12.   
  13.  .imgWrap a {   
  14.   display: block;   
  15.   height: 100%;   
  16.   background: #ffa url(images/gridBg.gif) repeat center;   
  17.  }   
  18.  .imgWrap a:hover {   
  19.   background-color: green;   
  20.  }   
  21.  .imgWrap span {   
  22.   display: inline-block;/*將行內(nèi)元素改變?yōu)樾袃?nèi)塊元素顯示*/  
  23.   width: 1px;/*實(shí)現(xiàn)ＩＥ下可讀效果*/  
  24.   height: 100%;/*使用元素高度和圖片容器高度一樣*/  
  25.   vertical-align: middle;/*垂直對(duì)齊*/  
  26.  }   
  27.   
  28.  .imgWrap img {   
  29.   vertical-align: middle;   
  30.  }   
  31. </style>  

  
效果
2016310113259290.png (300×73)

3、display:table模擬表格實(shí)現(xiàn)圖片垂直居中

接下來要說的這種方法是結(jié)構(gòu)有點(diǎn)復(fù)雜，而且在IE6-7事要配合hack來產(chǎn)現(xiàn)。這個(gè)方法就是模擬表格的形式來實(shí)現(xiàn)圖片垂直居中的效果。

表格大家都知道，他有行（table-row）單元格（table-cell），眾所周知，表格單元格中“vertical-align: middle”能讓元素垂直居中，那么下面這個(gè)實(shí)例就是利用這種原理來制作的，一起來看代碼

HTML Markup

  

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <ul class="imgWrap clearfix">  
  2.    <li>  
  3.     <div class="table">  
  4.      <div class="tableCell">  
  5.       <a href="#" class="imgBox"><img src="images/img1.jpg" alt="" /></a>  
  6.      </div>  
  7.     </div>    
  8.    </li>  
  9.    <li>  
  10.     <div class="table">  
  11.      <div class="tableCell">  
  12.       <a href="#" class="imgBox"><img src="images/img2.jpg" alt="" /></a>  
  13.      </div>  
  14.     </div>    
  15.    </li>  
  16.    <li>  
  17.     <div class="table">  
  18.      <div class="tableCell">  
  19.       <a href="#" class="imgBox"><img src="images/img3.jpg" alt="" /></a>  
  20.      </div>  
  21.     </div>    
  22.    </li>  
  23.    <li>  
  24.     <div class="table">  
  25.      <div class="tableCell">  
  26.       <a href="#" class="imgBox"><img src="images/img4.jpg" alt="" /></a>  
  27.      </div>  
  28.     </div>    
  29.    </li>  
  30.   </ul>   

  
CSS Code

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .imgWrap li {   
  2.  background: #ffa url(images/gridBg.gif) repeat center;   
  3.  width: 219px;   
  4.  height: 219px;   
  5.  float: left;   
  6.  border: solid 1px #666;   
  7.  margin: 10px 10px 0 0;   
  8.  list-style: none;   
  9.  text-align: center;   
  10. }   
  11. .table {   
  12.  width: 100%;   
  13.  height: 100%;   
  14.  display: table;   
  15.  position: relative;   
  16. }     
  17.   
  18. .tableCell {       
  19.  display: table-cell;   
  20.  vertical-align: middle;   
  21.  text-align: center;      
  22.  padding: 10px;   
  23.  *position: absolute;   
  24.  *top: 50%;   
  25.  *left: 50%;   
  26. }   
  27. .imgWrap a {   
  28.  display: block;   
  29.  *position:relative;   
  30.  *top: -50%;   
  31.  *left: -50%;   
  32. }  

  
效果
2016310113330868.png (300×73)

相關(guān)文章

最新評(píng)論