CSS未知高度元素垂直置中問題解決方案

最後更新：2017-01-13 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

首先我們來看這樣一段HTML：

代碼如下	複製代碼
<ul> <li> <a href=""><img src="" alt="" /></a> </li> </ul>

類似這樣的結構，是我們在實際應用中常遇到的，其中，li的寬和高都是固定的，但圖片的寬和高可能是不確定的，例如商城的商品列表。

此時，如果希望圖片水平置中，只需要給li應用text-align: center;即可，但如果需要圖片垂直置中就不那麼容易了。

網上有許多方法可以實現不固定高度元素垂直置中，例如：背景法、添加標籤法，但這類破壞HTML結構的方法都是我不想要的，最後採用了淘寶的方法。

代碼如下

複製代碼

li a {
width: 160px;
height: 160px;
padding: 2px;
background-color: #fafafa;
border: 1px solid #ececec;
margin: 0 auto;
display: table-cell;
*display: inline-block;
*font-size: 140px;
*font-family: Arial;
vertical-align: middle;
}
li img {
vertical-align: middle;
}

關鍵代碼為：

li a {
display: table-cell;
*display: inline-block;
*font-size: 140px;
*font-family: Arial;
vertical-align: middle;
}
li img {
vertical-align: middle;
}

我不是很情願使用hack，但實在沒辦法，使用hack總比在HTML中添加額外元素要好得多，所以個人覺得這是目前我所知的最好的解決方案。

這裡需要注意font-size的值，是根據li的高度除以1.14得來的，具體為什麼淘寶工程師也不知道。

另外，如果圖片的高度的是固定的，那麼可以使用絕對位置加負外邊距實現。

補充:

代碼如下

複製代碼

CSS* { margin:0; padding:0; list-style:none; } #vertical_box { width:100%; display:table; border:1px red solid; height:400px; /*針對IE的hack*/ *position:relative; } #vertical_box_sub { display: table-cell; vertical-align: middle; /*針對IE的hack*/ *position:absolute; *top:50%; } #vertical_box_container { font-family:"宋體"; border:1px green solid;/*針對IE的hack*/ *position:relative; *top:-50%; margin:0 auto; width:200px; }

HTML
<div id="vertical_box">
<div id="vertical_box_sub">
<div id="vertical_box_container">
<p>我是置中的文字</p>
<p>我置中</p>
<p>你也置中</p>
<img src="W3Markup.jpg" border=0 alt="" title="">
</div>
</div></div>

有上面1和2我們看到對多數瀏覽器text-align:center;只對img（預設inline-block）生效，而margin:auto只對div（預設block）生效，那這次我們試著將img設定為block，將div設定為inline-block再進行測試看看。
代碼如下

代碼如下

複製代碼

<!DOCTYPE>
<html >
<head>
<title>置中測試</title>
<style type="text/css">
.container{ width:200px; height:120px; border:1px solid Green;}
.box{ width:120px; height:90px; border:1px solid Green; display:inline-block;}
.h-align-div{ text-align:center;}
.h-align-img{ margin:auto auto; display:block;}
</style>
</head>
<body>
<div class="container h-align-div">
<div class="box"></div>
</div>
<div class="container">
<img class="h-align-img" width="120px" height="90px" src="#" alt="" />
</div>
</body>
</html>

相容性如下：
div: IE7 IE8 IE9 FireFox Chrome Safari Opera
img: IE7 IE8 IE9 FireFox Chrome Safari Opera
由上面的結果可以看出，text-align:center;和margin:auto主要是看元素的display屬性。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More