vertical-align設定的是元素的垂直對齊方式，這個說法看起來很簡單，但是用起來卻難以捉摸；還有一個說法是內聯元素的基線相對於該元素所在行的垂直對齊方式，那麼該元素所在行又是個啥？總體來說呢都不是特別好理解，那麼下面班分享：vertical-align知識點講解： vertical-align對行內塊元素造成哪些影響？

1、如果給子元素的vertical-align設定為Top

<style>

.all{

width: 300px;

height: 300px;

background: #0f0;}

.box1{

display: inline-block;

width: 200px;

height: 200px;

background: #ff0;

vertical-align: top;}

</style>

<body>

</div>

</body>

那麼子元素的top會出現在在父元素的top上，也就是子元素會靠在上面

2、如果給子元素的vertical-align設定為bottom

<style>

.all{

width: 300px;

height: 300px;

background: #0f0;}

.box1{

display: inline-block;

width: 200px;

height: 200px;

background: #ff0;

vertical-align: bottom;}

</style>

<body>

<div class="box1"></div>abcdefg

</div>

</body>

子元素的bottom會出現在父元素的bottom上，這裡需要強調的是父元素的bottom並不是盒子的最下邊，而是父元素裡面文字或者inline-block元素的最下面

3、如果給子元素的vertical-align設定為Middle

<style>

.all{

width: 300px;

height: 300px;

background: #0f0;}

.box1{

display: inline-block;

width: 200px;

height: 200px;

background: #ff0;

vertical-align: middle;}

</style>

<body>

<div class="box1"></div>abcdef

</div>

</body>

子元素的middle會在父元素的middle上

4、如果給子元素的vertical-align設定為Baseline

<style>

.all{

width: 300px;

height: 300px;

background: #0f0;}

.box1{

display: inline-block;

width: 200px;

height: 200px;

background: #ff0;

vertical-align: baseline;}

</style>

<body>

<div class="box1"></div>abcdef

</div>

</body>

子元素的baseline在父元素的baseline上，vertical-align的預設值就是baseline

三、基線是個啥？

為什麼說vertical-align會說到基線呢？那是因為該屬性的預設值就是baseline，那到底什麼是基線，請看圖：

v2-f2a5439994243acc24f894207691a54a_720w

透過這個圖片我們可以一目瞭然的發現，其實基線就是我們英文格子的第三條線。

vertical-align這個屬性的預設值就是baseline，請看如下效果：

<style>

.all{width: 500px;height: 300px;background: #0f0;}

.all div{ display: inline-block;background: #ff0;}

.box1{font-size: 12px;}

.box2{font-size: 18px;}

.box3{font-size: 26px;}

.box4{font-size: 40px;}

</style>

<body>

<div class="box1">1000phone</div>

<div class="box2">meimei</div>

<div class="box3">dalian</div>

<div class="box4">hahaha</div>

</div>

</body>

頁面中我放了四個行內塊元素，裡面放了不同字號的文字內容，子盒子也沒有設定高度，所有的盒子我都沒設定vertical-align，看看他們會怎麼樣排列：

v2-2ce94657674a5fb57091795b52f1006a_720w

不錯，所有元素都按照基線的位置對齊了，就是因為他們的預設垂直對齊方式的取值正是baseline的原因。

四、行高控制的到底是哪裡垂直居中？

做為一個資深的前端開發，大家都清楚的知道：行高等於容器高可以設定單行文字的垂直居中，那麼萬一容器裡面裝的是圖片呢？裝的是盒子呢？

如果盒子裡面裝的是行內塊元素，不管是圖片還是其他元素，它身上的vertical-align就會在行高範圍內進行運動。

<style>

.all{width: 500px;height: 500px;background: #0f0;line-height: 400px;}

.all img{vertical-align:bottom;width: 100px;}

</style>

<body>

</div>

</body>

分別調整了圖片的vertial-align的取值，你會發現他其實就是在行高範圍內進行移動的，所以圖片的垂直居中通常也會選擇取值為middle的做法。

五、關於圖片預設間隙的問題？

透過上面幾種情況的比較，相信大家也能知道這圖片間隙是什麼原因導致的了，不錯，就是因為vertical-align預設值是baseline

<style>

.all{width: 500px;background: #0f0;}

</style>

<body>

</div>

</body>

我的父盒子設定了背景顏色，但是我沒有設定高度

這個間隙正是因為圖片的最下邊源被認為是基線所在的位置，所以這個縫隙就是英文格子第三條和第四條之間的距離

加了幾個字母，可以清楚的看到這個距離的原因所在了。

那麼原因知道了，解決方案也得有啊：

1、將圖片的元素型別進行轉換，轉為塊元素就不會存在這個問題了，因為只有行內塊元素才會受vertical-align的影響

<style>

img{display:block}

</style>

2、改變圖片vertical-align的取值，只要不是預設的baseline就好啦（三選一即可）

<style>

img{vertical-align:top;}

img{vertical-align:middle;}

img{vertical-align:bottom;}

</style>

3、給圖片的父元素設定字號為0，沒有文字在圖片旁邊作祟了，也就沒有間隙了

<style>

.all{font-size:0;}

</style>

vertical-align知識點講解

相關文章