網頁裡物件要置中對齊的方法主要有2種,margin:0 auto 與 text-align:center,這兩種方式有什麼不同,下面用範例來解說
text-align:center
text-align:center主要是用在div或是區塊物件裡的文字p或是img,更具體一點可以說成是”行內物件”
大家可以試試下面的範例
<div id="outside">這是要置中的文字</div>
#outside{ background-color:#FF9900; width: 400px; height: 100px; }
這是還沒有加入text-align:center所得到的結果
現在加入text-align:center
附上完整css
#outside{ background-color:#FF9900; width: 400px; height: 100px; text-align:center; }
margin:0 auto
margin:0 auto主要是讓”區塊本身”置中,像是在網頁切版時,想讓整個內容部份置中的時候,就常常會用到這個屬性
來看下面的範例
<div id="box">這是要置中的區塊</div>
#box{ background-color:#FF9900; width: 400px; height: 100px; }
這是還沒有加入margin:0 auto的結果
在區塊上加入margin:0 auto,這個屬性主要是讓區塊本身置中,所以裡面的內容是不會置中的
margin:0 auto一定要配合設定width的屬性才可以運做喔~