前端技術之CSS實現圖片垂直居中

前端技術之CSS實現圖片垂直居中技術

maybe yes 發表於2015-03-14 18:52

原文連接 : http://blog.lmlphp.com/archives/86/The_front-end_technology_pure_CSS_to_achieve_image_vertically  來自 : LMLPHP後院

讓 圖片實現水平居中比較簡單，只須要在父級容器中添加屬性 text-align 爲 center 便可。使用純 CSS 實現圖片的垂直居中，能夠將圖片包裹容器的 display 屬性設置爲 table-cell，而後加上 vertical-align: middle 就行了 。table-cell 的顯示效果同 table 是同樣的，兼容性還不錯，因此直接使用 table 來包裹圖片也是一樣的效果，我的認爲使用 table 會更好一些，若是 DIV 顯示成 table-cell 是很難控制邊距的。

除了完成了上面的事情外，圖片自己也是須要作一些處理的，通常要居中顯示的圖片的大小和比例都是不一致的。這樣的狀況下，咱們須要去除圖片標籤自己自帶的 width 和 height 屬性，而後設置 max-width 和 max-height 屬性便可。

除了使用 CSS 實現圖片的居中顯示，也能夠根據圖片的高度和寬度屬性以及顯示區域的大小，而後計算出圖片的 margin-top 屬性的值獲得正常的偏移位置。這樣的方法比較麻煩，畢竟要對每一個圖片進行計算，而且很難保證圖片寬高屬性的正確性，可能會致使圖片變形。

當一個網站的價值越高時，需求也就越多，僅僅經過居中圖片不必定給人好的視覺體驗。好比 QQ 空間就專門對圖片進行了顯示優化處理，若是圖片中有人臉的話，在縮略圖中會突出人臉部分，這種圖像識別技術須要服務端的支持。

下面附上實現圖片居中的部分代碼：

<style>
.imgTab{
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
}
.imgTab td{
    padding: 5px;
}
.imgWrap {
    width: 200px;
}
.imgWrap img{
    max-height: 200px;
    max-width: 200px;
}
</style>

<table class="imgTab">

    <tr>
        <td>
            <div class="imgWrap">
                <img src="" />
            </div>
        </td>
    </tr>

</table>

閱(253)評(0)查看評論