inline-block元素上浮解决方案

解决同行等高inline-block元素对不齐的问题。

描述

在inline-block元素内加入长短不一的文本，部分元素出现了上浮现象。

预期与实际

关键

行内元素和替换元素的基线位于文本框的底端，无文本的块状行内元素、图片和非替换元素的基线就是元素的最底端。
当各元素之间的文本字体大小或者文本长度不一致时，基线的位置也会发生改变，页面会呈现更加的“混乱”状态，但实际上还是参照基线对齐的。

行内元素与替换元素默认vertical-align: baseline;。
如图：

baseline

方法

由于本例中的inline-block元素等高，因此设置vertical-align: top/middle/bottom;即可，其他情况按需选择。
代码示例：

  
  Lorem
  Lorem ipsum dolor sit
  

span {
    display: inline-block;
    width: 100px;
    height: 50px;
    text-align: center;
    vertical-align: top;/*也可设置为bottom/middle*/
    color: #fff;
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

效果：

效果

参考

• inline-block元素上浮无法对齐的解决办法