vertical-align指定了行级(inline-level)元素或表格单元格(table-cell)元素在line-box上的垂直对齐方式。
1.属性值
.baseline {vertical-align: baseline;} .len {vertical-align: 20px;} .per {vertical-align: -20%;} .top {vertical-align: top;} .middle {vertical-align: middle;} .bottom {vertical-align:bottom ;} .text-top {vertical-align: text-top ;} .text-bottom {vertical-align: text-bottom;} .inherit {vertical-align: inherit;} .sub {vertical-align: sub;} .super {vertical-align: super;}
(1)baseline
元素的基线与line-box的基线对齐。
<div> 属性值<span class="baseline"></span>xxx属性值值。 </div>
图1 baseline
(2)长度值
以基线为基准,向上(正值)或向下(负值)偏移的距离。
<div> 属性值<span class="len"></span>xxx属性值值。 </div>
图2 长度值
(3)百分比
是按照元素的line-height的值计算基准值的,100%的移动距离等于line-height的值。
<div> 属性值<span class="per"></span>xxx属性值值。 </div>
图3 百分比
(4)middle
元素的中垂线与line-box基线加字母x的1/2的高度对齐。
<div> 属性值<span class="middle"></span>xxx属性值值。 </div>
图4 middle
(5)top
元素的顶端与line-box顶端对齐。
<div> 属性值<span class="top"></span>xxx属性值值。 </div>
图5 top
(6)bottom
元素底端与line-box底端对齐。
<div> 属性值<span class="bottom"></span>xxx属性值值。 </div>
图6 bottom
(7)text-top
元素的顶端与line-box内容区域的顶端对齐。
<div> 属性值<span class="text-top"></span>xxx属性值值。 </div>
图7 text-top
(8)text-bottom
元素的底端与line-box的内容区域的底端对齐。
<div> 属性值<span class="text-bottom"></span>xxx属性值值。 </div>
图8 text-bottom