字型垂直居中的幾種實作方法

這幾天遇到了好多關于字型垂直居中的問題，整理一下，希望對大家也有幫助。

vertical-align：middle

vertical-align 用來指定行内元素（inline）和行内塊級元素（inline-block）或表格單元格（table-cell）元素的垂直對齊方式。

inline和inline-block

對于行内元素和行内塊級元素，

vertical-align

對

middle

的處理方式都是一樣的。

baseline——基線

元素基線與父元素的基線對齊。

middle——垂直居中

元素中垂線與父元素的基線加上小寫x一半的高度值對齊。

當我們對想要垂直居中的元素設定

vertical-align:middle

時，往往得不到我們預想的垂直效果。

核心代碼：

<style>
.va{vertical-align: middle;}
div{font-size: px;
margin: px auto;border: px dashed #000;text-align: center;}
.inline{display: inline;
font-size: px;
border: px dashed #000;}
</style>

<div>         
<span class="va inline">inline垂直居中</span>
inline垂直居中
</div>
           

很明顯，這個垂直居中的效果沒有我們想象中那麼好。

但是如果我們改變政策：

把設定

vertical-align: middle;

的元素作為标準，周圍的文字就會垂直對齊。

更加通俗的講，就是設定

vertical-align: middle;

的元素更大一點，周圍的文字元素要更小一點，就能實作周圍文字的垂直居中。

核心代碼

<style>
.va{vertical-align: middle;}
div{font-size: px;//更改了大小
margin: px auto;border: px dashed #000;text-align: center;}
.inline{display: inline;
font-size: px;//更改了大小
border: px dashed #000;}
</style>

<div>         
<span class="va inline">inline垂直居中</span>
    inline垂直居中
</div>
           

這才是我們想要的垂直居中的效果。

table-cell

baseline——基線 (與

sub, super, text-top, text-bottom, <length>, <percentage>

等屬性具有同樣的效果)

與同行單元格的基線對齊。

middle——垂直居中

單元格垂直居中

本文讨論的是文體垂直居中，該屬性的情況就不深入讨論了。

line-height + height

當line-height等于height時，可以實作字型垂直居中。

具體實作：

目标元素（字型）的line-height大小等于父類元素的height大小，可以實作垂直居中。

核心代碼：

<style>
* { margin: ;padding: ;}
div{width: px;
height: px;//父類元素高度
margin: px auto;border: px dashed #000;text-align: center;}
.lh{font-size:px;
line-height:px; //目标垂直字型的行高
}
</style>

<div>         
 <span class="lh">inline垂直居中</span>
</div>
           

行内塊級元素垂直居中+vertical-align：top

這種方法比較麻煩，但是适用于更多的場合。

實作過程如下：

1. 更改字型所在的元素為

display：inline-block

，

position：relative;

2. 設定字型的

line-height

與

font-size

相等；

3. 設定字型所在元素，

top：50%;

，

vertical-align:top

，

margin-top

為負的

font-size

大小的一半。

核心代碼

<style>
* { margin: ;padding: ;}
 div{width: px;height: px;margin: px auto;border: px dashed #000;text-align: center;}
.middle{display: inline-block;position:relative;
font-size:px;line-height:px;
top:%;margin-top:-px;
vertical-align:top; }
</style>

<div>         
<span class="middle">inline垂直居中</span>
</div>
           

實作的思路：

1. 将字型放置到一個行内塊級元素中

2. 将行内塊級元素垂直居中

細節說明：

• display：inline-block

  讓

  span

  元素變成一個行内塊級元素，配合

  position：relative;top:50%;margin-top:-12px;

  可以實作塊級元素垂直居中。

• font-size

  與

  line-height

  相等是為了保證

  span

  元素的高度不被行間距所影響，高度隻由

  font-size

  控制，友善了

  margin-top

  的設定。

• vertical-align:top

  是為了保證字型是頂格的，讓文體看起來更像是垂直居中。

前兩條估計大家都懂，我來詳細說說最後一條

vertical-align:top

。

vertical-align:top

把元素的頂端與行中最高元素的頂端對齊。

我們先來看看

vertical-align：baseline | middle | top 這三種的效果。

基線的效果：

中線的效果：

頂線的效果：

我們可以這樣想象：

由于我們設定了

position：relative;top:50%;margin-top:-12px;

，這相當于從上向下排列元素。

如果我們要保證字型也垂直居中，也必須字型在元素内部的從上到下排列（也就是所說的頂格），是以需要設定

vertical-align:top

。