【CSS學習】--- 文本水平對齊屬性text-align和元素垂直對齊屬性vertical-align

一、文本水平對齊屬性---text-align

　　text-align屬性是將塊級標簽以及單元格里面的內容進行相應的對齊，塊級標簽里的內聯元素會被整體進行移動，而子塊級元素或子單元格則會繼承父元素的text-align屬性。

 屬性值：

 

<!-- span和img作為內聯元素而整體居中 -->
<div style="text-align: center;">
    <span style="background-color: yellow;">test text</span>
    <br>
    <img src="http://h5ip.cn/oK0T" style="border: solid 1px red;">
</div>

 

<!-- 子div繼承父div的text-align屬性值，但子div元素不會相對於父元素對齊 -->
<div style="width: 200px; text-align: center; border: solid 1px blue;">
    <div style="width: 100px; height: 60px; border: solid 1px black;">
        <span>test</span>
    </div>
</div>

 

 二、元素垂直對齊屬性---vertical-align

 　　vertical-align 屬性設置行內元素的垂直對齊方式，在表單元格中，這個屬性會設置單元格框中的單元格內容的對齊方式。

屬性值：

 

 

三、最后

 慢慢補充吧。