溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關怎么用CSS在DIV中垂直對齊圖像，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
答案：使用CSSvertical-align屬性
您可以結合<div>使用CSSvertical-align屬性和display: table-cell;包含div元素上的，將圖像垂直居中對齊。
另外，由于CSSmargin屬性不適用于display: table-cell;元素，因此我們用另一個DIV（.outer-wrapper）包裝了包含DIV并在其上應用了邊距。該解決方案甚至適用于高度大于包含DIV的圖像。
例試試這個代碼»
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Vertically Center the IMG in a DIV with CSS</title>
<style>
.outer-wrapper{
display: inline-block;
margin: 20px;
}
.frame{
width: 250px;
height: 200px;
border: 1px solid black;
vertical-align: middle;
text-align: center;
display: table-cell;
}
img{
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- Alignment of undersized image -->
<div class="outer-wrapper">
<div class="frame">
<img src="images/club.jpg" alt="Club Card">
</div>
</div>
<br>
<!-- Alignment of vertically oversized image -->
<div class="outer-wrapper">
<div class="frame">
<img src="images/kites.jpg" alt="Flying Kites">
</div>
</div>
<br>
<!-- Alignment of horizontally oversized image -->
<div class="outer-wrapper">
<div class="frame">
<img src="images/sky.jpg" alt="Cloudy Sky">
</div>
</div>
</body>
</html>
關于“怎么用CSS在DIV中垂直對齊圖像”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng)、轉載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權內容。
