两端对齐在概念上不难理解。 如果您不了解两端对齐是什么意思,可以从Word等办公软件中了解下。 接下来让我们看看如何利用CSS使文本的两端对齐。
CSS两端对齐怎么设置

CSS实现两端对齐的方法:

  • text-align,w3school指出text-align用于在块级元素内设置文本的水平对齐方式。 如果要使inline元素或inline-block元素居中对齐,则可以使用text-align:center方法。 对于block元素,不能使用text-align来实现居中对齐。如果要block元素居中对齐,则可以使用margin:auto方法。
    在text-align属性下有一个justify值可以设置元素的两端对齐。 但是text-align:justify属性有一些缺点:
    在单一一行文本中,无法实现两端对齐效果。 在多行文本下,无法实现文本最后一行的两端对齐效果。
    如果要实现全文本两端对齐效果,可以用以下添加伪类方法解决。

    1
    2
    3
    4
    5
    6
    7
    8
    .ceshi {
        text-align: justify;
    }
    .ceshi:after {
        display: inline-block;
        width: 100%;
        content: '';
    }

    解决方案的思路:由于在单行文本和多行文本下最后一行无法实现两端对齐的效果,因此在元素上新增一行,即可实现justify的两个不足之处。

  • justify-content,在CSS3的新增的flex布局下,有一个justify-content属性,它可以控制flex项目的水平对齐方式。 有两个值,可以实现两端对齐。
    但是justify-content存在兼容性问题,IE10及更高版本,FF,Chrome均支持。 而且所有浏览器都支持text-align属性
    justify-content: space-around。flex项目将均匀地分布在伸缩容器中,在两端留出一半的空间。
    justify-content: space-between。flex项目均匀地分布在可拉伸容器中,第一个伸缩项目在伸缩容器的左边缘,最后一个可伸缩项目在伸缩容器的右边缘。
  • 还有一个text-justify属性,这个属性估计很少人会使用到,因为只有IE浏览器和FF55以上的浏览器才支持。
本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!网站资源来自用户分享,如有侵权行为请联系网站客服处理。
二月繁华 » CSS两端对齐怎么设置

发表评论

分享最优质的资源集合

了解详情