css vertical-align在ie6,ie8不同用法分析

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

上載者：User

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

值描述
baseline 預設。元素放置在父元素的基準上。
sub 垂直對齊文本的下標。
super 垂直對齊文本的上標
top 把元素的頂端與行中最高元素的頂端對齊
text-top 把元素的頂端與父元素字型的頂端對齊
middle 把此元素放置在父元素的中部。
bottom 把元素的頂端與行中最低的元素的頂端對齊。
text-bottom 把元素的底端與父元素字型的底端對齊。
length
% 使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit 規定應該從父元素繼承 vertical-align 屬性的值。

我們可以將div標籤換成span標籤，將浮動去掉，並且添加display：inline-block，然後再去改變值，哈哈。小藍色方塊的位置改變了。這說明了之前的結論。

對各個值的說明

該屬性定義行內元素的基準相對於該元素所在行的基準的垂直對齊。預設值是baseline。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表儲存格中，這個屬性會設定儲存格框中的儲存格內容的對齊。

vertical-align 屬性設定元素的垂直對齊。

很重要的一點就是它是針對行內元素起作用的，如果不是行內元素或者沒有設定成display:inline或者display：inline-block的元素就可能出現各種各樣的問題，有的生效了，有的卻沒有生效。

這裡我舉例來說明一下。代碼如下所示：

代碼如下

複製代碼

<!doctype html>
2 <html >
3 <head>
4 <meta http-equiv="content-type" content="text/html;charset=gb2312" />
5 <style type="text/css">
6 * { margin:0; padding:0 }
7 #doc { width:990px; margin:0 auto; margin-top:50px; }
8 #doc h4 { border-bottom:1px solid #000; margin:10px 0px; }
9 .out-box { background:#dfdfdf; color:white; padding-left:10px;display:inline-block;line-height:205px;}
10 .in-box {display:inline-block;width:5px; height:5px; background:blue;margin-right:10px;overflow:hidden;vertical-align:middle }
11 img {vertical-align:middle; }
12 </style>
13 <title></title>
14 </head>
15 <body>
16 <div id="doc">
17   <h4>vertical-align的研究</h4>
18 <span class="out-box">
19    <span class="in-box">
20    </span> 研究vertical-align屬性的作用<img src="dj.jpg"/>
21   </span>
22 <div style="line-height:140px; border:1px solid #666;font-size:12px">
23     <span style="font-size:40px; border:1px solid #999; vertical-align:text-top;">前面</span>後面。
24 </div>
25    </div>
26 </body>

在ie8,9的顯示是
vertical align和inline-block

　　圖片，從理論上來說是行內元素，表現上卻像是行內區塊層級元素。你可以給它設定高度和寬度，它會遵守，不像其它行內元素。

　　給行內區塊層級元素應用vertical-align，表現就像如上圖片那樣，這是vertical-align是最少讓你擔心的。但是那是另外一個故事了

本文章原先以中文撰寫並發佈於 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