inline-block垂直居中的方法

vetical-align的功能是設置行內元素垂直方向上的對齊方式。

可能的值

baseline	默認。元素放置在父元素的基線上。
sub	垂直對齊文本的下標。
super	垂直對齊文本的上標
top	把元素的頂端與行中最高元素的頂端對齊
text-top	把元素的頂端與父元素字體的頂端對齊
middle	把此元素放置在父元素的中部。
bottom	把元素的頂端與行中最低的元素的頂端對齊。
text-bottom	把元素的底端與父元素字體的底端對齊。
length
%	使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit	規定應該從父元素繼承 vertical-align 屬性的值。

可以控制圖片、文字等行內元素在行內的垂直方向上的對齊方式

如何使用vetical-align使塊級元素垂直居中？

以下面為例：

body{
    <div class="wrapper">
        <div class="content">some content</div>
    </div>
}

1、為父容器wrapper設置高度

html,body{
　　height:100%
}

.wrapper{
　　height:100%
}

2、使content容器變為行內元素

.content{
    display:inline-block;
}

3、利用before偽元素在content容器之前構造一個空內容的inline-block

.wrapper:before{
    content:"";
    display:inline-block;
    height:100%;
    vetical-align:middle;
}

此時，整個頁面只有一行，其中有兩個inline-block，讓空內容行內上下對齊

4、為content容器添加vetical-align屬性

.content{
    vetical-align:middle;
}

這樣，塊級元素在瀏覽器中始終都是垂直對齊的

 

還有諸如在html元素中添加空img屬性或者顯示為表格元素，均破壞了html元素的結構，在這里不做介紹。