做為一個前端設計人員，對于產品展示頁面的設計一定不會陌生，其中產品圖片擺放是必定經歷的一步，并且水平居中和垂直居中又是最多的。有時需要產品圖片水平垂直居中顯示，這種展示用CSS來實現又是比較棘手的一件事，我想很多前端攻程師都有研究過或者說是搜索過這些方法吧。很多網站都是使用table來實現產品圖片垂直居中，實現也是相當的方便，唯一不足之處就是結構繁鎖，那么今天和大家一起看幾種不是使用talbe方法實現產品圖片水平垂直居中的方法。

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

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

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

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

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

解決水平居中是相當的容易，如果圖片左浮動并且"display:inline"時，我們只要給圖片設置一個"text-align:center"屬性，就順利解決了水平居中。

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

1、table-cell加上display:inline

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

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

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

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

HTML Markup

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表