相信大家都会遇到同行不同盒子中文本的内容不能对齐的情况,而不知道这是为何?其实这是因为基线对齐的原因。
什么是基线对齐?
先让我们来看一张图片:
到这里我们的疑惑是不是少了一些?基线对齐其实就是指英文字母`a、i、n、s`这些字母的底部,它跟中文字符的底部的含义是不同的。
那我们再看一下实测:
<div class="box1">
哈哈
</div>
<div class="box2">
呵呵
</div>
<style>
.box1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
color: white;
font-size: 48px;
}
.box2 {
display: inline-block;
width: 50px;
height: 50px;
background-color: blue;
color: white;
font-size: 16px;
}
</style>
这时候的对齐方式是没什么问题的(浏览器默认字符大小16px)
再我先来改变一下字符的大小看看,将.box1
的字符改为48px:
.box1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
color: white;
font-size: 48px;
}
可以看到两个盒子文本距离底线有明显的不同,那么更换下盒子字符看看?
这时候可以看到很明显的区别,这就是基线对齐。
那我再来看看不改变文字大小,改变文字的行数看看:
<div class="box1">
哈哈哈哈哈哈哈哈哈哈哈哈
</div>
<div class="box2">
呵呵
</div>
这说明文字的基线对齐是相对于最后一行文字来说的!
那对于这种情况,如果我们想自定义垂直方向上的对齐方式改怎样呢?
在CSS中有个属性vertical-align
是设置垂直方向上的对齐方式的,我们只需要在同一行的任一个选择器,或者父亲节点的样式上设置改属性就行。
.box1 {
display: inline-block;
width: 100px;
height: 100px;
background-color: red;
color: white;
vertical-align: top;
}
vertical-align
可能的值的列表如下:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)