爲什麼更改一個內聯div的垂直對齊只會影響一個單獨的內聯div？

我有3個相同大小的內聯div與固體邊界，所以他們顯示爲矩形。我給他們分類left,center和right。爲什麼更改一個內聯div的垂直對齊只會影響一個單獨的內聯div？

當我有left類作爲vertical-align: top和right類作爲vertical-align: middle，他們似乎像這樣：

如果我添加vertical-align: bottom到center類，它不影響中心塊在所有。相反，它移動right類，就好像我根本沒有制定任何vertical-align樣式規則。什麼CSS規則造成這種情況？

2016-11-29 apdm

找到有關此問題的詳細信息，我會讀[文章]（http://christopheraue.net/2014/03/05/vertical-align/）要充分認識'的在垂直align'。對我來說主要是這樣的：_「好吧，從技術上講，使用垂直對齊佈局是一種黑客行爲，因爲它不是因爲這個原因而發明的，它是爲了在文本旁邊對齊文本和元素。」_ – zgood

take看看[這個有趣的問題]，可能會給（http://stackoverflow.com/questions/39791663/mystery-space-created-above-row-when-removing-the-content-inside-of-one-item）你更多的見解... – kukkuz

嗯，這是一個有趣的問題。我認爲祕密是通過了解vertical-align: middle與其他人不同，因爲它受到父元素的小寫字母的影響。我包裹在一個包裝的div，以顯示它：

.wrapper { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 120px; 
 
    width: 500px; 
 
} 
 

 
div { 
 
    display:inline-block; 
 
    height:100px; 
 
    width:25px; 
 
    border:1px solid black; 
 
} 
 

 
.left{ 
 
    vertical-align: top; 
 
} 
 

 
.center{ 
 
} 
 

 
.right{ 
 
    vertical-align: middle; 
 
}

<div class="wrapper"> 
 
    sddsfsdfdsfdsfdsfdsfdsfdsfdsaa 
 
    <div class="left"></div> 
 
    <div class="center"></div> 
 
    <div class="right"></div> 
 
</div>

所以很容易看出，正確的股利，與vertical align: middle是相對於小寫字母的位置。

至於第二個例子：

.wrapper { 
 
    margin: 0; 
 
    padding: 0; 
 
    height: 120px; 
 
    width: 500px; 
 
} 
 
div { 
 
    display:inline-block; 
 
    height:100px; 
 
    width:25px; 
 
    border:1px solid black; 
 
} 
 

 
.left{ 
 
    vertical-align: top; 
 
} 
 

 
.center{ 
 
    vertical-align: bottom; 
 
} 
 

 
.right{ 
 
    vertical-align: middle; 
 
}

<div class="wrapper"> 
 
    test test test test test 
 
    <div class="left"></div> 
 
    <div class="center"></div> 
 
    <div class="right"></div> 
 
</div>

這裏一切正常，按規則作爲良好的項目根據基線對齊，中間父的信容器。

您可以通過here

來源

2016-11-29 15:24:54 Chen

爲什麼更改一個內聯div的垂直對齊只會影響一個單獨的內聯div？

回答

相關問題