逼自己說幾句
我就頭疼這個(gè)text-align翅溺，因?yàn)槊看纹磳懕葘戝e(cuò)，也是沒誰了，在這里我就不把錯(cuò)的寫出來了，懲罰自己手寫十遍text-align
text-align text-align text-align text-align text-align text-align text-align text-align text-align text-align
定義與語法
text-align屬性是用來描述一個(gè)行內(nèi)元素是如何在身為父元素的塊級(jí)元素中對(duì)齊
通過定義可以看出text-align屬性并不能控制塊級(jí)元素的對(duì)齊方式恨搓，它只對(duì)塊級(jí)元素內(nèi)的行內(nèi)元素生效
來看看text-align屬性有哪些值
- left
- right
- center
- justify
- start (CSS3新增) （默認(rèn)值）
- end (CSS3新增)
- match-parent (CSS3新增)
接下來看看語法
# 內(nèi)容左對(duì)齊
text-align: left;
# 內(nèi)容右對(duì)齊
text-align: right;
# 內(nèi)容居中對(duì)齊
text-align: center;
# 內(nèi)容兩端對(duì)齊，但對(duì)于強(qiáng)制打斷的行（被打斷的這一行）及最后一行（包括僅有一行文本的情況筏养，因?yàn)樗仁堑谝恍幸彩亲詈笠恍校┎蛔鎏幚?text-align: justify;
# CSS3 內(nèi)容對(duì)齊開始邊界
text-align: start;
# CSS3 內(nèi)容對(duì)齊結(jié)束邊界
text-align: end;
# CSS3 這個(gè)值和inherit表現(xiàn)一致斧抱，只是該值繼承的start或end關(guān)鍵字是針對(duì)父母的direction值并計(jì)算的，計(jì)算值可以是left和right
text-align: match-parent;
其實(shí)text-align屬性的值left right center已經(jīng)很熟悉了撼玄，下面來重點(diǎn)看看justify
justify
首先明確的是夺姑，這個(gè)對(duì)齊的方式在英文文本上的表現(xiàn)效果更強(qiáng)一點(diǎn)墩邀，因?yàn)橛⑽氖且粋€(gè)個(gè)詞匯掌猛，有長有短，像中文這種方塊字都差不多的，設(shè)置內(nèi)容兩端對(duì)齊很難看出效果
來看看兩端對(duì)齊的效果實(shí)現(xiàn)
HTML
<div class="mydiv">This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. This paragraph contains a very long word</div>
CSS
.mydiv {
width: 120px;
border: 3px solid red;
text-align: justify;
}
其實(shí)荔茬，僅需聲明text-align-last: justify;便可設(shè)置最后一行也兩端對(duì)齊
start和end (CSS3新增)
直接上例子吧
HTML
<ul class="test">
<li>
<strong>start</strong>
<p class="start">start效果</p>
</li>
<li>
<strong>end</strong>
<p class="end">end效果</p>
</li>
</ul>
CSS
.test .start {
border: 2px solid red;
text-align: start;
}
.test .end {
border: 2px solid red;
text-align: end;
}
好吧废膘，我并沒有看出和left和right有什么區(qū)別，以后發(fā)現(xiàn)了再補(bǔ)充吧
對(duì)行內(nèi)元素的實(shí)現(xiàn)效果
text-align對(duì)塊級(jí)元素內(nèi)的文本是有效果的慕蔚，那么對(duì)行內(nèi)元素本身有效果么
HTML
<div class="mydiv left">
<span></span>
<span></span>
<span></span>
</div>
<div class="mydiv right">
<span></span>
<span></span>
<span></span>
</div>
<div class="mydiv center">
<span></span>
<span></span>
<span></span>
</div>
<div class="mydiv justify">
<span></span>
<span></span>
<span></span>
</div>
CSS
.mydiv {
width: 400px;
height: 30px;
border: 2px solid red;
}
span {
padding-left: 15px;
padding-right: 15px;
background: #ccc;
border: 1px solid;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align-last: justify;
}
嗯丐黄，效果和文本的對(duì)齊方式是一樣的...我靠，一樣個(gè)毛線啊孔飒，justify明顯沒有效果好么
細(xì)分析下來這個(gè)會(huì)不會(huì)是span之間沒有空格灌闺，就跟英文單詞一樣，瀏覽器渲染會(huì)認(rèn)為這三個(gè)span是一體的坏瞄，那就試試吧桂对，給span間加兩個(gè)空格
HTML
<div class="mydiv justify">
<span></span>
<span></span>
<span></span>
</div>
還真是
再來，加空格可以鸠匀，設(shè)置margin可以么蕉斜，很可惜，親測(cè)不行
對(duì)inline-block的實(shí)現(xiàn)效果
相同的例子缀棍，行內(nèi)元素?fù)Q成塊級(jí)元素宅此，對(duì)塊級(jí)元素設(shè)置display: inline-block;
HTML
<div class="mydiv left">
<p></p>
<p></p>
<p></p>
</div>
<div class="mydiv right">
<p></p>
<p></p>
<p></p>
</div>
<div class="mydiv center">
<p></p>
<p></p>
<p></p>
</div>
<div class="mydiv justify">
<p></p>
<p></p>
<p></p>
</div>
CSS
.mydiv {
width: 400px;
height: 30px;
border: 2px solid red;
}
p {
display: inline-block;
padding: 5px;
vertical-align: top;
border: 1px solid;
background: #ccc;
}
.left {
text-align: left;
}
.right {
text-align: right;
}
.center {
text-align: center;
}
.justify {
text-align-last: justify;
}
看看，效果相同爬范，并且好像發(fā)現(xiàn)了一個(gè)新東西父腕，inline-block后的塊級(jí)元素不用加空格就可以實(shí)現(xiàn)justify的效果
其實(shí)，那是因?yàn)?code>inline-block后的塊級(jí)元素本身有間隙青瀑，具體可以參考我的另一篇文章《消除inline-block后間隙的方法們》
參考文獻(xiàn)
（完）
文檔信息
- 自由轉(zhuǎn)載-非商用-非衍生-保持署名
- 發(fā)表日期：2016年9月17日
