CSS两端对齐怎么设置

两端对齐在概念上不难理解。 如果您不了解两端对齐是什么意思，可以从Word等办公软件中了解下。 接下来让我们看看如何利用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以上的浏览器才支持。