下面談談如何實現文字的兩端對齊。我所知道的大概有以下幾種方法
w3school指出，text-align用於設定塊級元素內文字的水平對齊方式。如果想使inline元素或inline-block元素居中對齊，可以使用text-align: center方法，對於block元素無法使用text-align實現居中對齊。如果想讓block元素居中對齊，可以使用margin: auto方法。
text-align屬性下有乙個justify值可以設定元素的兩端對齊。但是text-align: justify屬性有一些不足之處：
在單行文字下，無法實現兩端對齊效果。
在多行文字下，無法實現最後一行文字的兩端對齊效果。
單行文字
unclekeith wanna be a geek!
.keith
text-align: justify之後，會按照左圖顯示。無法是西安最後一行文字的兩端對齊效果。
如果要真正的實現兩端對齊效果，可以用以下方法解決。
解決方法的思路：由於在單行文字下和多行文字下最後一樣無法實現兩端對齊效果，因此給元素新增一行，即可實現justify的兩個不足之處。
.keith
.keith:after
css3新增的flex布局下，有乙個justify-content屬性，此屬性可以控制伸縮專案的水平對齊方式。其中有兩個值，可以實現兩端對齊。但是justify-content存在相容性問題，ie10以上，ff，chrome都支援。而所有瀏覽器都支援text-align屬性
justify-content: space-around。 伸縮專案會平均地分布在伸縮容器內，兩端保留一半的空間。
justify-content: space-between。伸縮專案會平均地分布在伸縮容器內，第乙個伸縮專案在伸縮容器的左邊緣，最後乙個伸縮專案在伸縮容器的右邊緣。
justify-content: space-between
還有乙個text-justify屬性，這個屬性估計很少人會使用到，因為只有ie瀏覽器和ff55以上的瀏覽器才支援。因為相容性實在不好，就不說了..
css實現兩端對齊
兩端對齊用text align justify 但怎麼解決單行不能兩端對齊呢，思路就是 讓瀏覽器認為這不是最後一行就行了 在元素裡面加乙個會換行的空的子元素比如 i style display inline block width 100 height 0 i li 效果如下 幾點注意事項 1 sp...
CSS兩端對齊
兩端對齊在導航條tab的製作中非常常用。本文將詳細介紹css兩端對齊的3種實現方式 彈性盒模型flex作為強大的彈性布局方式，可以hold住大部分的布局效果，當然也包括兩端對齊。可以使用主軸對齊justify content的兩端對齊屬性space between justify content s...
css 兩端對齊
當我們做篩選框的時候，有的時候會需要篩選文字兩端對齊的情況，如圖 文字的對齊方式大都是通過設定text align來實現，text align屬性下有乙個justify值可以設定元素的兩端對齊。但是text align justify屬性有一些不足之處 在單行文字下，無法實現兩端對齊效果。在多行文字...