CSS文字真正两端对齐(俩字和三字对齐)

喜枝儿

已于 2022-11-15 18:28:50 修改

阅读量2.3k

点赞数

分类专栏：前端文章标签： CSS 文字对齐两端对齐 inline-block 布局技巧

于 2022-11-15 18:27:05 首次发布

原文链接：https://blog.csdn.net/MrZZhou/article/details/72259741

版权

前端专栏收录该内容

21 篇文章 2 订阅

订阅专栏

在网上找了好久，都不好使，终于发现一位大哥分享的方法，好使！

首先感谢大哥分享，我在这里，把这份热量传递下去，同事也给自己做个备忘。

希望可以帮助到更多人：

css：

div.justify { 
    text-align: justify; 
    width:200px; 
    font-size:15px; 
    color:red; 
    border:1px solid blue; 
    height:18px;
}
div.justify > span { 
    display: inline-block /* Opera */; 
    padding-left: 100%; 
}

HTML：

<div class="justify">hello, text justify.</div><br/>
<div class="justify"> hello, text justify.<span></span></div><br/>
<div class="justify">中 文 两 端 对 齐</div><br/>
<div class="justify">中 文 两 端 对 齐<span></span></div>

总结一下，就是，父级加上text-align: justify;并定义宽度，子级设置为display: inline-block;并加一个padding-left:100%;

为啥? 我也不知道，哈哈！小技巧，记住就好。