html+css使用空白標籤巧妙實現不同尺寸的圖片在容器裡垂直居中的方法
阿新 • • 發佈：2019-01-29
實現圖片在容器累垂直居中有多種方法，例如計算高度使用margin，透明gif圖片+背景定位等等，其中很多方法比較繁瑣相容性也不好，例如用position方法。下面為大家介紹兩種比較簡潔的方法，一種是利用display：table-cell實現 圖片垂直居中，另一種是使用空白標籤巧妙實現不同尺寸的圖片在容器裡垂直居中的方法；第二種方法是我為了解決前一種方法存在的相容性為題而想出來的，這是在查了一些資料後，受到張鑫旭的部落格的啟發想到的。
一、先介紹display：table-cell的方法：
二、使用空白標籤巧妙實現不同尺寸的圖片在容器裡垂直居中的方法
先簡單的說一說原理：將要顯示的圖片與一個高度為100%，寬度1px的空元素進行vertical-align:middle對齊；
張鑫旭介紹的是一種與透明的gif圖片進行vertical-align:middle對齊的方法，但是用img標籤時chrome會出現bug，受到啟發我嘗試使用空標籤，經過多次測試，最後發現使用空白標籤
也能實現居中效果，且更為簡單，不限於img標籤。
這裡新增的空標籤可以為 span 、 a等標籤，但需要在樣式中轉為行內塊元素才能起效，用img標籤有一些注意事項我已經寫在註釋裡了；
谷歌出現的bug如下圖：
一、先介紹display：table-cell的方法：
話不多說上程式碼：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table-cell 圖片居中</title> <style type="text/css"> .wrap{ float: left; } a{display:table-cell; vertical-align:middle; width:128px; height:150px; border:1px solid #beceeb; text-align: center;} img{ max-width:128px;max-height:150px; } </style> </head> <body> <div class="wrap"> <a href="#" ><img src="images/1.jpg" alt='圖片'></a> </div> <div class="wrap"> <a href="#" ><img src="images/2.jpg" alt='圖片'></a> </div> </body> </html>
二、使用空白標籤巧妙實現不同尺寸的圖片在容器裡垂直居中的方法
先簡單的說一說原理：將要顯示的圖片與一個高度為100%，寬度1px的空元素進行vertical-align:middle對齊；
張鑫旭介紹的是一種與透明的gif圖片進行vertical-align:middle對齊的方法，但是用img標籤時chrome會出現bug，受到啟發我嘗試使用空標籤，經過多次測試，最後發現使用空白標籤
也能實現居中效果，且更為簡單，不限於img標籤。
這裡新增的空標籤可以為 span 、 a等標籤，但需要在樣式中轉為行內塊元素才能起效，用img標籤有一些注意事項我已經寫在註釋裡了；
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用空白標籤實現圖片在容器裡垂直居中</title> <style type="text/css"> li{ height:128px; width:150px; padding:13px 0; float:left; margin-right:10px; border:1px solid #beceeb; text-align:center; font-size:0; } li .help_img{ height:100%; width:1px; display: inline-block; /*標籤需轉換為行內塊元素*/ vertical-align:middle; } li .show_img{ vertical-align:middle; } </style> </head> <body> <ul class="zxx_align_box_6 fix"> <li> <img class="show_img" src="images/1.jpg" /> <span class="help_img" /></span> </li> <!--這裡如果使用img標籤會出現問題，src=""的存在會讓chrome出現相容性問題(出現灰色邊框)，去img標籤中的src=""時會導致在火狐無法垂直居中 如果使用img標籤仍需要在樣式中加上display：inline-block；才能消除上述影響--> <li> <img class="show_img" src="images/2.jpg" /> <span class="help_img" /></span> </li> </ul> </body> </html>
谷歌出現的bug如下圖：
加上display-inline後bug解決
經測試第二種方法在各大瀏覽器中均能實現很好的效果，消耗小，方便快捷，在這裡推薦給大家。