溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“如何利用vertical-align:middle實現行內元素的水平垂直居中對齊”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何利用vertical-align:middle實現行內元素的水平垂直居中對齊”吧！
最終實現效果為實現行內元素的水平、垂直居中對齊，效果圖如下： 
接下來為實現代碼：
代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title> 利用vertical-align實現圖片垂直居中對齊 </title>
<style>
#content {
position:absolute;
top:0;right:0;bottom:0;left:0;
margin:auto;
width:500px;
height:500px;
background-color:yellow;
text-align:center;
}
.vertical-align-span {
display:inline-block;
width:1px;
height:100%;
margin-left:-10px;
vertical-align:middle;
}
#content img{
vertical-align:middle;
}
</style>
</head>
<body>
<div id="content">
<span class="vertical-align-span"></span>
<img src="5.jpg">
</div>
</body>
</html>
理論基礎：
看一下W3C上對vertical-align的定義：vertical-align 屬性設置元素的垂直對齊方式。該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。允許指定負長度值和百分比值。這會使元素降低而不是升高。在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。（必須承認這句話我看了很久頁沒看懂，后來在博客園看了學明兄弟的文章才明白了大概）；
學明兄弟認為它有兩種用法：
第一種用法，先看后面一句“在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。”這很容易理解，如果給一個表格的td加一個 vertical-align:middle的樣式，表格里面的內容會垂直居中，同樣的如果給一個vertical-align:bottom就會底部對齊，如果給一個vertical-align:top就會頂部對齊。
第二種用法，看前頁一句“該屬性定義行內元素的基線相對于該元素所在行的基線的垂直對齊。”專業的語言我不會說的，可以打個比喻：假設有兩個行內元素a和 b，a和b都是img，當a加了一個vertical-align:middle樣式之后，b的底部（基線）就會對齊a的中間位置，如下圖： 
如果a和b都加了一個vertical-align:middle樣式，那么就互相對齊了對方的中間位置，也就是它們在垂直方向上的中線對齊了，如下圖： 
說到這里，思路就清晰了。
同樣的原理對文字等也適用。
感謝各位的閱讀，以上就是“如何利用vertical-align:middle實現行內元素的水平垂直居中對齊”的內容了，經過本文的學習后，相信大家對如何利用vertical-align:middle實現行內元素的水平垂直居中對齊這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
