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