溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關css圖片怎么實現垂直，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
vertical-align屬性
我們使用text-align屬性來定義圖片水平對齊方式。
大家就開始有疑問了，圖片水平對齊我們實現了，那如果想對圖片進行垂直對齊呢？
在CSS中，我們可以使用vertical-align屬性來定義圖片的垂直對齊方式。
語法：vertical-align:屬性值;
vertical-align還有sub、super等一些屬性值，對于這些我們不需要去理會，因為在實際開發中壓根兒用不上。我們只需要使用以上這4個屬性值就完全足夠了。
舉例1:
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vertical-align屬性</title>
<styletype="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>
php中文網<imgid="img_1"src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"alt=""/>php中文網（<strong>top</strong>）
<hr/>
php中文網<imgid="img_2"src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"alt=""/>php中文網（<strong>middle</strong>）
<hr/>
php中文網<imgid="img_3"src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"alt=""/>php中文網（<strong>bottom</strong>）
<hr/>
php中文網<imgid="img_4"src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"alt=""/>php中文網（<strong>baseline</strong>）
</body>
</html>
效果如下：
微信截圖_20181112155823.png
大家仔細觀察一下，“vertical-align:baseline”和“vertical-align:bottom”是有區別的。
舉例2：
<!DOCTYPEhtml>
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title>vertical-align屬性</title>
<styletype="text/css">
div
{
width:100px;
height:80px;
border:1pxsolidgray;
}
.div_img1{vertical-align:top;}
.div_img2{vertical-align:middle;}
.div_img3{vertical-align:bottom;}
img{width:60px;height:60px;}
</style>
</head>
<body>
<divclass="div_img1">
<imgsrc="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"alt=""/>
</div>
<divclass="div_img2">
<imgsrc="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"alt=""/>
</div>
<divclass="div_img3">
<imgsrc="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg"alt=""/>
</div>
</body>
</html>
關于“css圖片怎么實現垂直”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
