消息关闭
    暂无新消息!

css vertical-align 属性值为middle

问题作者 : 大新2017-08-17发布

属性的描述:vertical-align:middle:元素的中垂点与 父元素的基线加1/2父元素中字母x的高度 对齐。

疑惑:这个属性值想要描述的到底是什么?元素的中垂点对齐父元素(基线+1/2字母'x')的高度?

实验代码
1.html部分:

<div class="box1">
    xph
    <img src="img/880374243715778.jpg" />
    <span>span</span>
</div>
<div class="box2"></div>

2.css部分

.box1{background-color:pink;}
.box2{
    border-bottom: 1px solid blue;
    position:absolute;
    top:44px;
    width:100%;
}

结果

蓝色的线的图片(90*90)的中垂点,这个结果和基线+1/2的字母'x'有什么关系啊?(头有点痛,先去洗澡了)

看过的博客:http://www.zhangxinxu.com/wor...


2个回答

︿ 3

昨天看了几篇博客,文中写道:

baseline和middle line的高度之差为'x' 字符高度的一半

所以vertical-align:middle 的大白话就是元素的中垂点对齐父元素的中线?