text-align屬性是用來描述壹個行內元素是如何在身為父元素的塊級元素中對齊
通過定義可以看出text-align屬性並不能控制塊級元素的對齊方式，它只對塊級元素內的行內元素生效
來看看text-align屬性有哪些值
left
right
center
justify
start (CSS3新增) （默認值）
end (CSS3新增)
match-parent (CSS3新增)
接下來看看語法
# 內容左對齊text-align: left;# 內容右對齊text-align: right;# 內容居中對齊text-align: center;# 內容兩端對齊，但對於強制打斷的行（被打斷的這壹行）及最後壹行（包括僅有壹行文本的情況，因為它既是第壹行也是最後壹行）不做處理text-align: justify;# CSS3 內容對齊開始邊界text-align: start;# CSS3 內容對齊結束邊界text-align: end;# CSS3 這個值和inherit表現壹致，只是該值繼承的start或end關鍵字是針對父母的direction值並計算的，計算值可以是left和righttext-align: match-parent;
其實text-align屬性的值leftrightcenter已經很熟悉了，下面來重點看看justify
justify
首先明確的是，這個對齊的方式在英文文本上的表現效果更強壹點，因為英文是壹個個詞匯，有長有短，像中文這種方塊字都差不多的，設置內容兩端對齊很難看出效果
來看看兩端對齊的效果實現
HTML
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. This paragraph contains a very long word
CSS
.mydiv{width:120px;border:3pxsolid red;text-align: justify;}
其實，僅需聲明text-align-last: justify;便可設置最後壹行也兩端對齊
start和end (CSS3新增)
直接上例子吧
HTML
CSS
.test.start{border:2pxsolid red;text-align: start;}.test.end{border:2pxsolid red;text-align: end;}
好吧，我並沒有看出和left和right有什麽區別，以後發現了再補充吧
對行內元素的實現效果
text-align對塊級元素內的文本是有效果的，那麽對行內元素本身有效果麽
HTML
CSS
.mydiv{width:400px;height:30px;border:2pxsolid red;}span{padding-left:15px;padding-right:15px;background:#ccc;border:1pxsolid;}.left{text-align: left;}.right{text-align: right;}.center{text-align: center;}.justify{text-align-last: justify;}
嗯，效果和文本的對齊方式是壹樣的...我靠，壹樣個毛線啊，justify明顯沒有效果好麽
細分析下來這個會不會是span之間沒有空格，就跟英文單詞壹樣，瀏覽器渲染會認為這三個span是壹體的，那就試試吧，給span間加兩個空格
HTML
還真是
再來，加空格可以，設置margin可以麽，很可惜，親測不行
對inline-block的實現效果
相同的例子，行內元素換成塊級元素，對塊級元素設置display: inline-block;
HTML
CSS
.mydiv{width:400px;height:30px;border:2pxsolid red;}p{display: inline-block;padding:5px;vertical-align: top;border:1pxsolid;background:#ccc;}.left{text-align: left;}.right{text-align: right;}.center{text-align: center;}.justify{text-align-last: justify;}
看看，效果相同，並且好像發現了壹個新東西，inline-block後的塊級元素不用加空格就可以實現justify的效果
其實，那是因為inline-block後的塊級元素本身有間隙，具體可以參考我的另壹篇文章《消除inline-block後間隙的方法們》
鏈接：/p/50ef0d1988de
來源：