Question

我想比较垂直对齐的文字底部和底部。以下是我的代码：

＆＃13;

div {
   display: inline-block;
   font-family: "Arial";
   background-color: blue;
}
    		
#left .px100 {
   font-size: 100px;
}
    		
#left .px50 {
   font-size: 50px;
   vertical-align: text-bottom;
}
    		
#right .px100 {
   font-size: 100px;
}
    		
#right .px50 {
   font-size: 50px;
   vertical-align: bottom;
}

＆＃13;

<div id="left">
   x
   <span class="px100">x<span>
   <span class="px50">x<span>
</div>
<div id="right">
   x
   <span class="px100">x<span>
   <span class="px50">x<span>
</div>

＆＃13;

从运行结果来看，我无法弄清楚这两个属性之间的区别。

Answer 1

如果您加入明确的height和line-height，情况会更明显。 text-bottom将匹配文本的底部，而bottom将匹配元素的底部。

＆＃13;

div {
   display: inline-block;
   font-family: "Arial";
   background-color: blue;
   height: 100px;
   line-height: 80px;
}
    		
#left .px100 {
   font-size: 100px;
}
    		
#left .px50 {
   font-size: 50px;
   vertical-align: text-bottom;
}
    		
#right .px100 {
   font-size: 100px;
}
    		
#right .px50 {
   font-size: 50px;
   vertical-align: bottom;
}

＆＃13;

<div id="left">
   x
   <span class="px100">x<span>
   <span class="px50">x<span>
</div>
<div id="right">
   x
   <span class="px100">x<span>
   <span class="px50">x<span>
</div>

＆＃13;

Answer 2

来自https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

文字底

将元素的底部与父元素的字体底部对齐。

<强>底

将元素及其后代的底部与整行的底部对齐。

文本底部和底部之间没有区别

2 个答案: