vertical-align 的使用

之前老是想要一些元素垂直居中對齊，常常用line-height，但是對於圖片來講，line-height的表現並不理想，因此得用vertical-align:middle，如下是其用法：

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

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

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

• 父元素（inline-block\block）必須含有line-height（inline元素有無皆可），子元素中的（inline-block/inline元素）vertical-align才能起做用
  
• vertical-align不可繼承，必須對子元素單獨設置

關於定義——

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

數值詳解：

 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。

。。。

關於做用環境——

只有一個元素屬於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小一些覆蓋父元素

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

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

例：黃色的線爲圖片中垂線

<div style="height:200px">
<img src="gallery4.jpg" style="width:50px;vertical-align:middle;">
<span style="vertical-align:middle">hahahahhah</span>
</div>
複製代碼

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

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

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

文章只爲保存記錄方便查詢問題

原文連接：blog.csdn.net/diudiu5201/…