文本行内对其方式(上、中、下)

张你好11 发布于:2021-11-21 02:13:31

问题:

想让如下图文本内容统一

顶部对其 或 居中对其 或 下对齐


image.png 


解决方案:

可将  01 行高设置为1  

通过调整01 和 02 的vertical-align 使两个元素文本对其到想要位置

如:让其底部对其

两个元素则都设置
vertical-align:bottom;

所有代码:

//(.p1=01  .p2=03)
.p1{line-height:1;vertical-align:bottom;}
.p2{vertical-align:bottom;}


注:

        当两个元素 vertical-algin 相同时,可能不会让两个对齐、但是,通过调整两个元素的对齐方式,一般都可以达到我们所需要的效果。如果达不到,可使用 transform 来解决其对齐问题

觉得有用请点个赞吧!
1 586