CSS文本对齐text-align详解
1.語法?
text-align具體參數(shù)如下：
說明：設(shè)定元素內(nèi)文本的水平對齊方式。?
參數(shù)：left?:?左對齊；right?:?右對齊；center?:??居中；justify?:??兩端對齊?
初始值：跟瀏覽器的設(shè)置有關(guān)?
繼承性：可繼承?
適用于：block元素?
其各參數(shù)在瀏覽器內(nèi)的顯示如圖1所示。?
圖1?水平對齊方式?
前三種對齊方式都很好理解，而最后一種兩端對齊（text-align:justify）可以讓大段的文本看起來比較整齊，不過兩端對齊的表現(xiàn)可能會因為瀏覽器的不同而有所不同，如圖2所示。?
圖2?不同瀏覽器對于兩端對齊的不同表現(xiàn)?
2.適用于：block元素?
text-align屬性只有對block元素設(shè)定才會生效。例如有如下設(shè)定：?
雖然對圖片設(shè)定了居中對齊，但是在瀏覽器內(nèi)的效果如圖3所示。?
??
圖3?圖片與對齊方式?
由圖3讀者可以看到，因為圖片<img>默認(rèn)為inline元素，所以即使定義了“text-align:center;”，也仍然同文字一起右對齊。因此不能直接通過對圖片的設(shè)定來達(dá)到單獨圖片的對齊。?
如果想讓單個圖片達(dá)到居中的效果，應(yīng)該在其外嵌套一個block元素，然后設(shè)置這個元素的對齊方式為居中對齊，如下所示：?
其效果如圖4所示。?
??
圖4?圖片居中?
3.繼承性?
text-align屬性是可繼承的。當(dāng)設(shè)定了某個元素的水平對齊方式以后，其子孫元素的水平對齊方式都將繼承該設(shè)定，如圖5所示。?
??
圖5?text-align的繼承性?
由于text-align屬性的繼承性，因此在定義時候需要特別注意，如果子孫元素不希望繼承水平對齊方式，則需要再分別定義。?
4.應(yīng)用：整體居中?
雖然text-align用以設(shè)定文本的水平對齊方式。但是在IE中，對齊會應(yīng)用在此元素內(nèi)所有的子孫元素上，例如有如下代碼：?
??<p?style="width:70%;">本段落會在IE內(nèi)居中顯示，而在Firefox和Opera內(nèi)居左顯示。</p>?
</div>?
其在Windows?IE?6.0、Firefox?2.0和Opera?8.5中顯示的效果如圖6所示。?
???
圖6?不同瀏覽器的差別?
讀者可以看到，<p>元素本身也居中顯示了，因此可以利用此特性來設(shè)置頁面內(nèi)容在IE內(nèi)的整體居中效果，例如有html結(jié)構(gòu)如下：?
??<div?id=”wrap”>?
????<h1>頁面居中</h1>?
????<p>設(shè)置CSS使頁面整體居中。</p>?
</div>?
</body>?
要使<div?id=”?wrap”>在瀏覽器內(nèi)居中，則需要設(shè)置CSS如下：?
text-align:?center;??/*?在IE內(nèi)居中?*/?
}?
#wrap?{?
width:?90%;??/*?設(shè)定寬度才能顯示出居中的效果。*/?
margin:?0?auto;??/*?在Firefox及Opera等瀏覽器內(nèi)居中。*/?
}?
此時在瀏覽器內(nèi)瀏覽，頁面內(nèi)的元素都將居中顯示，如圖7所示。?
圖7?瀏覽器內(nèi)頁面整體居中?
轉(zhuǎn)載于:https://www.cnblogs.com/wonderfullife/archive/2011/09/09/2172706.html
總結(jié)
以上是生活随笔為你收集整理的CSS文本对齐text-align详解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： $.ajax()常用方法详解(推荐)
- 下一篇： C#发现之旅第二讲 C#－XSLT开发