大小不固定的圖片和多行文字的垂直水平居中

一、大小不固定，多行文字的垂直居中① 單行文字可能很多人都知道如何讓單行文字垂直居中顯示，就是使用line-height，將line-height值與外部標籤盒子的高度值設置成一致就可以了。例如：單行文字居中顯示測試，css樣式為：height:3em; line-height:3em;……② 多行文字但是對於外框高度固定，文字大小個數不固定的多行文字呢？文字可能一行顯示，也有可能多行顯示；文字可能是小號字體，也有可能是大號的。這時候如何讓其垂直居中顯示呢？看下面！這裡的文字用來做多行文字垂直居中對齊的測試。這是第二行文字，您還可以再添加一行文字做測試！上面所展示的就是多行文字垂直居中的效果！HTML結構如下：<div class="zxx_align_box_2"><span class="zxx_align_word">這裡顯示多行文字。</span></div>css代碼如下：.zxx_align_box_2{display:table-cell; width:550px; height:1.14em; padding:0 0.1em; border:4px solid #beceeb; color:#069; font-size:10em; vertical-align:middle;}.zxx_align_box_2 span.zxx_align_word{display:inline-block; font-size:0.1em; vertical-align:middle;}實現的原理：說白了，就是把文字當圖片處理。用一個span標籤將所有的文字封裝起來，設置文字與圖片相同的display屬性（inline-block屬性），然後用處理圖片垂直居中的方式處理文字的垂直居中即可。有幾點簡要說明：1.此例子用em做單位，如果您對em單位了解不夠，把握不來的話，可以使用px做單位，值要換；2.外部div不能使用浮動；3.外部div高度和文字大小比例1.14為宜；4.內部標籤的vertical-align:middle可以省略，但是外部div高度和文字大小比例要修改，我自己試了一下，高度比字體1.5左右的樣子；5.系統原因，我沒能夠在IE8下測試。對於一些細化的原理，將在圖片垂直居中處講一下。二、大小不固定，圖片的垂直居中① 透明gif圖片+背景定位這裡利用了background-position:center實現圖片居中顯示。這是個很實用也是很聰明的辦法，對於維護控制成本都很不錯。微軟必應圖片搜索的圖片排列就是使用的這種方法。方法的原理很簡單，使用一個透明的gif圖片做覆蓋層，高寬拉伸至所需要的大小，然後給這個gif圖片一個background-position:center center的屬性。而background-image建議寫在頁面上，因為實際項目中，這肯定是個動態的URL地址，css文件似乎不支持動態URL地址。下面就是此方法的實例表現。

HTML部分（僅示例一張圖片，其他重複，故略）：<ul class="zxx_align_box_3 fix"> <li> <img src="../image/pixel.gif" style="background-image:url(http://image52.360doc.com/DownloadImg/2012/05/2316/24303732_2.jpg);" /> </li></ul>css部分：.zxx_align_box_3 li{width:1em; height:1em; padding:0.1em; margin:0 0.1em 0 0; font-size:128px; float:left; border:1px solid #beceeb;}.zxx_align_box_3 li img{display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center;}② display:table-cell和文字大小控制居中據說這個方法是淘寶的工程師想到的，確實是不錯的方法！但是下面展示的卻不是原版，而是我的修改版，去掉了沒有必要的hack。

HTML部分（僅示例一張圖片，其他重複，故略）：<ul class="zxx_align_box_4 fix"> <li> <div><img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/2316/24303732_2.jpg" /></div> </li></ul>css部分：.zxx_align_box_4 li{float:left; margin-right:13px;}.zxx_align_box_4 li div{display:table-cell; width:144px; height:144px; border:1px solid #beceeb; font-size:118px; text-align:center; vertical-align:middle;}.zxx_align_box_4 li div img{vertical-align:middle;}需要說明的：1.原版的代碼中有兩個hack，一個是針對文字大小的，另外一個是針對block屬性的；後經過我測試推敲後證實這兩個hack都是多餘的，而*display:block更是多餘，因為IE6,IE7根本就不認識display:table-cell是誰！2.這個通過文字大小控制IE下圖片垂直居中是個很不錯的方法，要比使用position:relative這類高消耗的css方法要好多了。但是這個方法不足之處在於：不支持img外標籤的浮動，所以當多圖片顯示時需要再在外面嵌套一層標籤——資源消耗多了！3.高度：文字大小=1.14，這個比例我一直記著，但是後來我將這個比例的概念淡化了，原因在於多次遇到其他比例實現效果的情況。例如上面，就是1:1實現的。4.這個方法巧妙的應用了IE默認文字空間的概念，然而這個默認文字空間是看不見，摸不著的，較抽象，不好理解，使用者多記住用法，深層次原因不太理解，不易上手。但是，這裡我要轉折一下，我想到了一種方法，將抽象默認文字空間的概念具體出來，實現了更加容易理解，更加方便使用，更加利於維護的新方法，這就是最後一種方法。③ display:inline-block和文字大小控制居中這是我自己想到的方法，代碼相當簡潔，是個成本很低，效果驚人的方法，適用於多圖顯示的情況。只需要一層必須要的a標籤就解決問題了！

HTML部分（僅示例兩張圖片，其他重複，故略）：<div class="zxx_align_box_5 fix"> <a href="#zhangxinxu"> <img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/2316/24303732_2.jpg" /> </a> <a href="#zhangxinxu"> <img src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/2316/24303732_3.jpg" /> </a></div>css部分：.zxx_align_box_5 a{display:inline-block; width:1.2em; font-size:128px; text-align:center; vertical-align:middle;}.zxx_align_box_5 a img{vertical-align:middle; padding:2px; border:1px solid #beceeb;}需要說明的：1.img外的標籤需是a標籤或span這類inline屬性的標籤，div標籤也可以，但是css代碼多些:display:inline; display:inline-block先變成inline屬性，再轉變成inline-block屬性，原因講起來又是一篇長長的文章，放著。2.此方法只需要兩層標籤即可，可謂代碼超簡潔，但是只適用於多圖垂直居中對齊的情況。因為其對齊原理是相鄰的圖片居中對齊，如果只是一個圖片，vertical-align:middle就只有與空格對齊了。④ 使用空白圖片實現垂直對齊好吧，我知道說大話會被人笑的，但是我還是非常自信地推薦下面這種我想出來的圖片垂直居中對齊的方法。非常簡單，非常易懂，出錯率低，上手方便，兼容性上佳！

HTML部分（僅示例一張圖片，其他重複，故略）：<ul class="zxx_align_box_6 fix"> <li> <img class="show_img" src="https://www.getit01.com/getimg_360.php?url=http://image52.360doc.com/DownloadImg/2012/05/2316/24303732_2.jpg" /> <img class="alpha_img" src="../image/pixel.gif" /> </li></ul>css部分：.zxx_align_box_6 li{height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0;}.zxx_align_box_6 li .alpha_img{height:100%; width:1px; vertical-align:middle;}.zxx_align_box_6 li .show_img{vertical-align:middle;}原理簡述：一句話，將要顯示的圖片與一張透明的高度100%，寬度1像素的透明圖片vertical-align:middle對齊。其核心原理其實與第二種利用font-size大小實現IE下圖片垂直居中是一致的。將font-size設置得很大，目的是撐開IE下默認文字空間的高度，其性質類似於空格，然後通過vertical-align:middle屬性讓圖片與這個高高的空白空格空間垂直居中對齊；而這裡將這個看不見的文字空間實例成一張透明的gif圖片，高度可以輕鬆設置為外部標籤的高度，然後通過vertical-align:middle對齊，就實現效果了，在各個瀏覽器下都是一樣的表現，不需要擔心什麼兼容性的問題。而且代碼很簡單，很易懂，想出錯都難！
推薦閱讀：