解决同行等高inline-block元素对不齐的问题。
描述
在inline-block
元素内加入长短不一的文本,部分元素出现了上浮现象。
关键
行内元素和替换元素的基线位于文本框的底端,无文本的块状行内元素、图片和非替换元素的基线就是元素的最底端。
当各元素之间的文本字体大小或者文本长度不一致时,基线的位置也会发生改变,页面会呈现更加的“混乱”状态,但实际上还是参照基线对齐的。
行内元素与替换元素默认vertical-align: baseline;
。
如图:
方法
由于本例中的inline-block
元素等高,因此设置vertical-align: top/middle/bottom;
即可,其他情况按需选择。
代码示例:
<div class="wrap">
<span></span>
<span>Lorem</span>
<span>Lorem ipsum dolor sit</span>
<span></span>
</div>
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%);
}
效果:
效果
网友评论