溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了css圖片實現垂直對齊的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
vertical-align屬性
我們使用text-align屬性來定義圖片水平對齊方式。
大家就開始有疑問了，圖片水平對齊我們實現了，那如果想對圖片進行垂直對齊呢？
在CSS中，我們可以使用vertical-align屬性來定義圖片的垂直對齊方式。
語法：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="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>億速云（<strong>top</strong>）
<hr/>
億速云<img id="img_2" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>億速云（<strong>middle</strong>）
<hr/>
億速云<img id="img_3" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>億速云（<strong>bottom</strong>）
<hr/>
億速云<img id="img_4" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" 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="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>
</div>
<div class="div_img2">
<img src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>
</div>
<div class="div_img3">
<img src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>
</div>
</body>
</html>效果如下：
咦？！怎么回事？怎么圖片沒有按照預期的進行垂直對齊？啊，其實大家誤解了vertical-align屬性了，vertical-align屬性定義是：vertical-align屬性定義行內元素相對于該元素的垂直對齊方式。
感謝你能夠認真閱讀完這篇文章，希望小編分享css圖片實現垂直對齊的方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
