vetical-align的功能是設定行內元素垂直方向上的對齊方式。
可能的值
baseline
預設。元素放置在父元素的基線上。
sub垂直對齊文字的下標。
super
垂直對齊文字的上標
top把元素的頂端與行中最高元素的頂端對齊
text-top
把元素的頂端與父元素字型的頂端對齊
middle
把此元素放置在父元素的中部。
bottom
把元素的頂端與行中最低的元素的頂端對齊。
text-bottom
把元素的底端與父元素字型的底端對齊。
length
%使用 "line-height" 屬性的百分比值來排列此元素。允許使用負值。
inherit
規定應該從父元素繼承 vertical-align 屬性的值。
可以控制、文字等行內元素在行內的垂直方向上的對齊方式
如何使用vetical-align使塊級元素垂直居中？
以下面為例：
body
html,bodyheight:100%
}
2、使content容器變為行內元素
.content
3、利用before偽元素在content容器之前構造乙個空內容的inline-block
content:"";
display:inline-block;
height:100%;
vetical-align:middle;
}此時，整個頁面只有一行，其中有兩個inline-block，讓空內容行內上下對齊
4、為content容器新增vetical-align屬性
.content
這樣，塊級元素在瀏覽器中始終都是垂直對齊的
還有諸如在html元素中新增空img屬性或者顯示為**元素，均破壞了html元素的結構，在這裡不做介紹。
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...
居中（水平居中 垂直居中）
一 水平居中。1.最普通的 在視口或視窗中 水平居中。先寫乙個div，給它一些基本樣式。此時只用設定乙個屬性 margin，就得到了居中的結果 沒錯，這就是凝膠物布局，此方法必須設定元素的width 2.居中乙個絕對定位的元素。上述方法的元素使用預設的定位，即static，那麼當元素是絕對定位 ab...