关于css中的行内块状元素对齐问题

hzrWeb
  • 1.2k

图片描述

如图,所有小方块li设为固定宽高,在最后一个li后面加了一个span,span里面有文字,为什么同为display为inline-block元素后面却无法上下对齐呢?怎么解决?
我尝试过给span加个relative,然后向上偏移几个像素,但是我的li个数在需求里可能会增加,于是出现当增加后span又不对齐了(如下图),这是什么导致的,如何解决?
图片描述

回复
阅读 9.8k
3 个回答
枫s的思念
  • 2.4k
✓ 已被采纳

这个跟基线对齐有关系,如果你给写文字的那个span设置一个vertical-align:top,就可以对齐,具体原因如下:
从CSS2的可视化格式模型文档中可以看到:
inline-block的基线是正常流中最后一个line box的基线,除非这个line box里面既没有line boxes或者本身overflow属性的计算值不是visible,这种情况下基线是margin底边缘。
举例:

<style>
    .dib-baseline{
        display: inline-block;
        width: 150px;
        height: 150px;
        border: 1px solid #cad5eb;
        background-color: #f0f3f9;
        margin-top: 20px;
    }
</style>
<span class="dib-baseline"></span>
<span class="dib-baseline">dib-baseline</span>

运行结果:

clipboard.png
因为前面的盒子没有任何字符,此时它的基线就是它的底边缘,后面的盒子有文字,所以该盒子的基线就是文字的基线,二者基线对齐,现成如此效果。
如果把第二个盒子line-height:0,此时文字基线的位置,就是文字的垂直中心,所以:
clipboard.png
这就是为什么出现这个问题的原因,通过改变对齐方式可以达到对齐。
具体关于vertical-align的讲解可以看看张鑫旭老师的CSS深入理解之vertical-align

设置行高试试line-height

你先写一个demo再说吧,应该就是行高、基线垂直对齐的问题

宣传栏