解决css字体底部不对齐问题

作者: Hasan_hs | 来源:发表于2023-08-31 14:17 被阅读0次

布局
WKwebView底部留白问题
[CSS]div对齐问题（顶部和底部对齐）
CSS 字体对齐
解决使用NSMutableAttributedString 设置
解决css图片和文字不在一条水平线上
解决使用NSMutableAttributedString 设置
ReactNative 不同大小Text文本底部对齐
css 使用字体图标不对齐的时候，错位的情况
可能会用到的R语言包~2

场景描述：主标题和副标题在同一行，且文字以字体底部对齐。

效果如下：

image.png

解决方案：

【HTML】

<div class="container">
  <div class="main_title">主文字</div>
  <div class="subtitle">副文字</div>
</div>

【CSS】

.container {
    display: flex;
    align-items: baseline;
}

简单说明【MDN】

baseLine

所有元素向基线对齐。侧轴起点到元素基线距离最大的元素将会于侧轴起点对齐以确定基线。

简单来说，就是设置一下 baseline就可以了

布局
不同字体底部对齐￥ 56 .9 2371人付款
WKwebView底部留白问题
如图，webview布局没问题，但是WKContentView 底部不对齐；解决办法
[CSS]div对齐问题（顶部和底部对齐）
记录一个小问题：在一个大div中，放两个小div，发现对齐结果不是预期的：原因：不同浏览器有不同的布局方式，有的...
CSS 字体对齐
text-align:justify; 两边对齐text-align:left; 左对齐text-align:ri...
解决使用NSMutableAttributedString 设置
问题描述使用NSMutableAttributedString设置不同字体，文字不能居中对齐；如图：解决方法N...
解决css图片和文字不在一条水平线上
css解决文字和图片不在一条水平线上通常情况下图片是默认顶部对齐，而文字则是默认底部对齐的，所以我们在布局时经常...
解决使用NSMutableAttributedString 设置
问题描述使用NSMutableAttributedString设置不一样字体文字不能居中对齐；如图：解决方法...
ReactNative 不同大小Text文本底部对齐
需求显示金额时，小数部分字体要小，整数部分字体要大。底部肯定是要对齐的，如下图实现方法参考： https:/...
css 使用字体图标不对齐的时候，错位的情况
css 使用字体图标不对齐的时候使用vertical-align: middle; 将字体图标和文字都设置ve...
可能会用到的R语言包~2
aplot Y叔开发，拼图解决坐标对齐的问题 extrafont 解决ggplot2绘图导出pdf文件中文字体乱码...