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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值