怎么應用vertical-align，才能生效？

vertical-align 的使用

 以前總是想要一些元素垂直居中對齊，經常用line-height，可是對於圖片來說，line-height的表現並不理想（非常不理想）可看我的文章： line-height系列（二）
，所以得用vertical-align:middle。然而用的時候總是無效，查了資料和實踐后，終於知道vertical-align的用法了！

 

作用環境：父元素設置line-height。

作用對象：子元素中的inline-block和inline元素。

一、當父元素設置了line-height

• 父元素（inline-block\block）必須含有line-height（inline元素有無皆可），子元素中的（inline-block/inline元素）vertical-align才能起作用。

• vertical-align不可繼承，必須對子元素單獨設置。

 

關於定義——

在父元素定義了line-height的條件下，vertical-align的作用是讓（inline/inline-block）子元素依據父元素的基點對齊。

 

值	描述
長度	通過距離升高（正值）或降低（負值）元素。'0cm'等同於'baseline'
百分值 – %	通過距離（相對於1line-height1值的百分大小）升高（正值）或降低（負值）元素。'0%'等同於'baseline'
baseline	默認。元素的基線與父元素的基線對齊。
sub	降低元素的基線到父元素合適的下標位置。
super	升高元素的基線到父元素合適的上標位置。
top	把對齊的子元素的頂端與line box頂端對齊。
text-top	把元素的頂端與父元素內容區域的頂端對齊。
middle	元素的中垂點與 父元素的基線加1/2父元素中字母x的高度 對齊。
bottom	把對齊的子元素的底端與line box底端對齊。
text-bottom	把元素的底端與父元素內容區域的底端對齊。
inherit	采用父元素相關屬性的相同的指定值。

 數值詳解：

1. 首先關於數值，見下面的示例：

　.test{vertical-align:-2px;}

　元素相對於基線向下偏移兩像素，這個常常用來修復單選框/復選框與12像素文字大小不對齊的問題。

 

2. 再者關於百分數值，這里的vertical-align，是相對於此標簽繼承的line-height值決定的。例如，如下示例代碼：

　.test{vertical-align:-10%;}

　假設這里的.test的標簽繼承的行高是20px，則這里的所代表的實際值是：-10%*20px=-2px。 IE6/IE7瀏覽器下的vertical-align的百分比值不支持小數line-height。

 

　其他的值更多參考： 張鑫旭的“我對CSS vertical-align的一些理解與認識（一） ”

 

 

關於作用環境——

只有一個元素屬於inline或是inline-block（table-cell也可以理解為inline-block水平）水平，其身上的vertical-align屬性才會起作用。

• 所謂inline-block水平的元素，即可以與inline水平元素混排，又能設置高寬屬性的元素，例如圖片，按鈕，單復選框，單行/多行文本框等HTML控件，只有這些元素默認情況下會對vertical-align屬性起作用。
• 對inline元素設置vertical-align是有作用的，只是要重新設置line-height的值，否則繼承了父元素的line-height只能垂直居中。

 

例一：inline元素作為父元素可以不設置line-height，字體會撐起一個適合子元素作用的高度。小白點可以各種對齊。

<span class="box"> <span class="dot"></span> 我是一段卡哇伊的文字。 </span>
.box{background:black; color:white; padding-left:20px;} 
.dot{display:inline-block; width:4px; height:4px; background:white;vertical-align:top;}

 

 

例二：div父元素必須設置line-height，否則對其設置vertical-align無效，圖片不會在綠色框里動~

<div class="outerbox">
<img src="C:\Users\Administrator\Desktop\test.jpg"/>
<span>這是外層元素的內部文字</span>
</div>
.outerbox{width:300px; line-height: 300px;font-size: 16px; }
.outerbox img{width: 30px; height:30px; vertical-align: bottom;}
.outerbox span{vertical-align: top;}

 

對文字設置vertical-align:top 無效是因為文字繼承了父元素的line-height，導致文字居中，要想vertical-align起作用，可在該元素上設置line-height小一些覆蓋父元素。

 

 

 

 

二、當父元素沒有設置line-height時，inline/inline-block子元素之間對齊。

• 當父元素沒有設置line-height時，只對行內元素的兄弟元素對齊有用，無法子元素居中對齊父元素。
• 設置了vertical-align:middle的子元素的中線與兄弟元素的基線對齊。若兄弟元素都設置該項，則居中對齊。

 

例：黃色的線為圖片中垂線。

<div style="height:200px">
<img src="C:\Users\Administrator\Desktop\桌面\gallery4.jpg" style="width:50px;vertical-align:middle;">
<span style="vertical-align:middle">hahahahhah</span>
</div>

 

只設文字的vertical-align，則文字的中線對齊圖片底線

只設圖片的vertical-align，則圖片的中線與文字的基線對齊

 

兩個的vertical-align都為middle，則兩個的中線互相對齊

 

 

2017-01-20