小程序?qū)崿F(xiàn)文字上下居中的辦法

小程序?qū)崿F(xiàn)文本上下居中，也就是使用父元素高度確定的單行文本的豎直居中的方法來實(shí)現(xiàn)，這也是最為基本的方法。

　　父元素高度確定的多行文本、圖片等的豎直居中的方法有兩種：

　　方法一：使用插入 table (包括tbody、tr、td)標(biāo)簽，同時(shí)設(shè)置 vertical-align：middle。

　　css 中有一個(gè)用于豎直居中的屬性 vertical-align，在父元素設(shè)置此樣式時(shí)，會(huì)對(duì)inline-block類型的子元素都有用。下面看一下例子：

　　html代碼：

　　1

　　2

　　3

　　4

　　看我是否可以居中。p>

　　5 p>

　　6 tr>table>

　　7 body>

　　css代碼：

　　1 table td{height:500px;background:#ccc}

　　因?yàn)?td 標(biāo)簽?zāi)J(rèn)情況下就默認(rèn)設(shè)置了 vertical-align 為 middle，所以我們不需要顯式地設(shè)置了。

　　方法二：設(shè)置塊級(jí)元素的 display 為 table-cell(設(shè)置為表格單元顯示)

　　但這種方法兼容性比較差，只是提供大家學(xué)習(xí)參考。

　　在 chrome、firefox 及 IE8 以上的瀏覽器下可以設(shè)置塊級(jí)元素的 display 為 table-cell(設(shè)置為表格單元顯示)，激活 vertical-align 屬性，

　　但注意 IE6、7 并不支持這個(gè)樣式, 兼容性比較差。

　　html

　　1

　　2

　　3

　　看我是否可以居中。p>

　　4

　　看我是否可以居中。p>

　　5

　　看我是否可以居中。p>

　　6 p>

　　7 p>

　　css

　　1

　　這種方法的好處是不用添加多余的無意義的標(biāo)簽，但缺點(diǎn)也很明顯，它的兼容性不是很好，不兼容 IE6、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質(zhì)。