物件左右置中:text-align:center;、margin:0 auto; 的區別

網頁裡物件要置中對齊的方法主要有2種,margin:0 auto 與 text-align:center,這兩種方式有什麼不同,下面用範例來解說

001-2

text-align:center

text-align:center主要是用在div或是區塊物件裡的文字p或是img,更具體一點可以說成是"行內物件"

大家可以試試下面的範例

這是還沒有加入text-align:center所得到的結果

002

現在加入text-align:center
003

附上完整css

margin:0 auto

margin:0 auto主要是讓"區塊本身"置中,像是在網頁切版時,想讓整個內容部份置中的時候,就常常會用到這個屬性

來看下面的範例

這是還沒有加入margin:0 auto的結果

004-1

在區塊上加入margin:0 auto,這個屬性主要是讓區塊本身置中,所以裡面的內容是不會置中的

margin:0 auto一定要配合設定width的屬性才可以運做喔~

005

Leave a Reply