如何正確使用css中vertical align

首先明確，vertical-align只對inline-block和inline元素有效。

在說vertical-align之前，需要先說明一下什麼是line box。

瀏覽器中顯示的一行會包含多個非block元素（有block元素時就換行了），通過乙個box可以把這一行包含起來，這就是乙個line box。

比如乙個div，他會佔據一行，包裹著內部所有非block元素的就是乙個line box。

line box的高度，是本行中擁有最高行高的元素的高度。

此時，對擁有最高行高的非block元素設定vertical-align值，會直接影響本行的基線位置（可以說就是設定了本行的基線位置），本行中其他非block元素設定vertical-align時，都是相對於本行的基線位置進行顯示。

舉例：

<

div 
style
="height:100px;width:100px;border:1px solid black;"
>
<
span 
style
="display:inline-block;height:50px;vertical-align:top;border:1px solid black;"
>1
span
>
<
span 
style
="vertical-align:top;"
>2
span
>
<
span 
style
="vertical-align:middle;"
>3
span
>
<
span 
style
="vertical-align:bottom;"
>4
span
>
div>
<
div 
style
="height:100px;width:100px;border:1px solid black;"
>
<
span 
style
="display:inline-block;height:50px;vertical-align:middle;border:1px solid black;"
>1
span
>
<
span 
style
="vertical-align:top;"
>2
span
>
<
span 
style
="vertical-align:middle;"
>3
span
>
<
span 
style
="vertical-align:bottom;"
>4
span
>
div>
<
div 
style
="height:100px;width:100px;border:1px solid black;"
>
<
span 
style
="display:inline-block;height:50px;vertical-align:bottom;border:1px solid black;"
>1
span
>
<
span 
style
="vertical-align:top;"
>2
span
>
<
span 
style
="vertical-align:middle;"
>3
span
>
<
span 
style
="vertical-align:bottom;"
>4
span
>
div>

1所在的span高度最高，所以其設定的vertical-align會直接影響本行的基線位置。調整1所在的span出現的先後順序，結果都是一樣的。

再舉例：

在乙個block元素中使用

#parent::before或者#parent::after

content:'';

display:inline-block;

height:100%;

vertical-align:middle;

可使#parent中的非block元素垂直居中顯示，也是上述的原理。

ps:如果想讓1在span中垂直居中顯示，保證span的display是inline-block，然後將span的line-height設定為50px，同span高度相等即可。不可設定為100%，最後的line-height只是文字大小的高度。

學習網頁製作中如何在正確選取和使用 CSS 單位

在 css 測量系統中，有好幾種單位，如畫素 百分比 英吋 厘公尺等等，web 開發人員很難了解哪些單位在何處使用，如何使用。很多人習慣了總是使用同一種單位，但這一決定可能會嚴重限制你的設計的執行。這裡推薦的 which css measurements to use when 這篇文章介紹了各種單...

如何正確使用記憶體

如何正確使用記憶體 對於初學者來說，記憶體是個神秘的空間。程式的絕大部分錯誤，也是在於記憶體的使用不當造成的，而且這些錯誤有些都是隱藏很深的。所以，如何掌握記憶體的使用，通曉系統對記憶體的管理手段，將是軟體成功的乙個非常關鍵的因素。首先我們要了解記憶體的分配方式。一般來說，記憶體的分配方式有三種 1...

如何正確使用列舉

列舉型別，對程式設計師來說再熟悉不過了，但是，你確定你在正確得使用它嗎？在用列舉之前，讓我們來區分一下狀態和選項這兩個概念。那麼，我們怎麼使用列舉來定義狀態和選項呢？不好的寫法 你可能經常見到的寫法 define status fail 0 define status success 1 用int變...