css实现两端对齐效果

CSS实现两端对齐效果

两端对齐，从概念上来讲，其实不难理解。若是不明白什么叫两端对齐，能够玩玩word等办公软件。

下面谈谈如何实现文本的两端对齐。我所知道的大概有如下几种方法

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. 在多行文本下，没法实现最后一行文本的两端对齐效果。

单行文本

<div class="keith">unclekeith wanna be a geek!</div> .keith { background-color: lightblue; text-align: justify; }

对于多行文本而言，以下图，按照咱们的理解应该如右图显示，但是在设置text-align: justify以后，会按照左图显示。没法是西安最后一行文本的两端对齐效果。

解决方法

若是要真正的实现两端对齐效果，能够用如下方法解决。

解决方法的思路：因为在单行文本下和多行文本下最后同样没法实现两端对齐效果，所以给元素新增一行，便可实现justify的两个不足之处。 .keith { text-align: justify; } .keith:after { display: inline-block; width: 100%; content: ''; }

若是感受最后多了空行，能够为元素设置一个高度，而且设置overflow: hidden隐藏掉便可。

justify-content

CSS3新增的flex布局下，有一个justify-content属性，此属性能够控制伸缩项目的水平对齐方式。其中有两个值，能够实现两端对齐。可是justify-content存在兼容性问题，IE10以上，FF，Chrome都支持。而全部浏览器都支持text-align属性

justify-content: space-around。 伸缩项目会平均地分布在伸缩容器内，两端保留一半的空间。 justify-content: space-between。伸缩项目会平均地分布在伸缩容器内，第一个伸缩项目在伸缩容器的左边缘，最后一个伸缩项目在伸缩容器的右边缘。

justify-content: space-around;

justify-content: space-between