HTML如何消除文本基线,html – 如何在基线上定位文本？

在搜索…并且搜索之后,我想出了关于如何将文本与元素的基线对齐的非常棒的

tutorial at adobe’s place.

使用假元素

我会建议这个,但看看下面的所有故事(从.strut元素到单个伪元素的道路)：

div {

width: 400px;

height: 100px;

}

.first {

font-size: 24px;

background-color: #9BBCE3;

}

.first::after {

content: "";

height: 100%;

display: inline-block;

}

Hello g World / With font-size: 24px

使用额外的.STRUT元素

>场景和规则

规则1(较大的字体)：我们希望div的高度是固定的.例如20px.因此,font-size必须等于或小于.height值才能工作.通常,

〜前面的尺寸必须与固定高度相等或相当.它适用于所有尺寸且价格低廉的尺寸

场景1：假设我们的字体大于本案例的20px.

div.forall {

width: 700px;

height: 48px;

border: thin black solid;

background-color: #9BBCE3;

margin-top: 20px;

}

.inText {

font-size: 48px;

line-height: 48px;

}

.inText3 {

font-size: 22px;

line-height: 22px;

}

.strut {

height: 48px;

display: inline-block;

}

Hello g World /With font-size 46px

Hello g World /With font-size 32px

Hello g World /With font-size 32px

>解释

关于这个实现的所有魔术都是关于.strut元素的.这是一个带有display：inline-block;属性！

我想知道……又是什么？！

支柱的基线位于其下边缘处,这在这种情况下仅由支柱的高度确定.如果字母跨度的行高小于支柱的高度,则字母的基线将移动以匹配！难以置信的！

>主要实施

div.forall {

width: 300px;

height: 20px;

border: thin black solid;

background-color: #9BBCE3;

margin: 10px;

}

.inText {

font-size: 20px;

line-height: 20px;

}

.intext2 {

font-size: 9px;

line-height: 9px;

}

.strut {

height: 20px;

display: inline-block;

}

Hello g World /With font-size 20px

Hello g World / Without font-size

Hello g World / with font-size:9px