1. 程式人生 > >行內元素、行內塊元素設定水平居中的特殊方法

行內元素、行內塊元素設定水平居中的特殊方法

如果塊級元素裡包含有行內元素或者行內塊元素,要想設定行內元素水平居中對齊,此時可以將行內元素看成是父元素中的文字,即利用 text-align: center;屬性就可以將行內元素設定成水平居中。具體的看下面的例子:
在這裡插入圖片描述
在這裡a元素就可以看作是.nav的文字。設定a水平居中,就可以利用.nav的text-align: center;屬性。
顯示結果如下:
在這裡插入圖片描述
上面的方法只對行內元素和行內塊元素起作用,對塊級元素不適用。具體看下面的例子:
在這裡插入圖片描述
注意這裡首先要對p設定寬度。顯示結果如下:
在這裡插入圖片描述
p是塊級元素,所以不能看作文字,text-align屬性不起作用。
但是存在一種特殊情況,在沒有給p設定寬度的時候,p是會水平居中。原因是塊級元素可以繼承text-align屬性,在p沒有設定寬度時,會繼承.banner的text-align屬性,所以對於p中的文字會起作用。
在這裡插入圖片描述


顯示結果如下:
在這裡插入圖片描述