在上一節我們介紹了使用text-align屬性來定義圖片水平對齊方式，我們看一下上一節的預覽圖：
大家就開始有疑問了，圖片水平對齊我們實現了，那如果想對圖片進行垂直對齊呢？
在CSS中，我們可以使用vertical-align屬性來定義圖片的垂直對齊方式。
語法：
vertical-align:屬性值;
說明：
vertical即“垂直的”，align即“使排整齊”。大家記憶CSS屬性要跟在HTML入門教程中記憶HTML標簽一樣，根據英文意思去記憶就事半功倍了。
vertical-align屬性取值如下表：
vertical-align還有sub、super等一些屬性值，對於這些我們不需要去理會，因為在實際開發中壓根兒用不上。我們只需要使用以上這4個屬性值就完全足夠了。
舉例1：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vertical-align屬性</title>
<style type="text/css">
img{width:80px;height:80px;}
#img_1{vertical-align:top;}
#img_2{vertical-align:middle;}
#img_3{vertical-align:bottom;}
#img_4{vertical-align:baseline;}
</style>
</head>
<body>
學習網<img id="img_1" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/> 學習網（<strong>top</strong>）
<hr/>
學習網<img id="img_2" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/> 學習網（<strong>middle</strong>）
<hr/>
學習網<img id="img_3" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/> 學習網（<strong>bottom</strong>）
<hr/>
學習網<img id="img_4" src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/> 學習網（<strong>baseline</strong>）
</body>
</html>
在浏覽器預覽效果如下：
分析：
大家仔細觀察一下，“vertical-align:baseline”和“vertical-align:bottom”是有區別的。
舉例2：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vertical-align屬性</title>
<style type="text/css">
div
{
width:100px;
height:80px;
border:1px solid gray;
}
.div_img1{vertical-align:top;}
.div_img2{vertical-align:middle;}
.div_img3{vertical-align:bottom;}
img{width:60px;height:60px;}
</style>
</head>
<body>
<div class="div_img1">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</div>
<div class="div_img2">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</div>
<div class="div_img3">
<img src="../App_images/lesson/run_cj/cartoongirl.gif" alt=""/>
</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
咦？！怎麼回事？怎麼圖片沒有按照預期的進行垂直對齊？啊，其實大家誤解了vertical-align屬性了，vertical-align屬性定義是：vertical-align屬性定義行內元素相對於該元素的垂直對齊方式。
在這裡，大家可能就會想，那怎麼在一個元素內設置該元素中的img標簽相對於該元素垂直對齊呢？這個問題，我們就留在“CSS進階教程”中給大家詳細講解。
大家若不知道行內元素是什麼東西，請點擊這裡→“塊元素和行內元素”。
疑問其實vertical-align屬性top、middle、bottom、baseline這4個屬性值並不是你想象中的那麼簡單易懂，有了一定CSS基礎，你可以深入去了解vertical-align屬性。
在 學習網即將推出的“CSS進階教程”，將會給大家深入剖析vertical-align屬性，只有站長helicopter才會給大家發那麼多福利喔！