在搜索…并且搜索之后,我想出了关于如何将文本与元素的基线对齐的非常棒的
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;
}
使用额外的.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;
}
>解释
关于这个实现的所有魔术都是关于.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;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
