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

網頁裡物件要置中對齊的方法主要有2種，margin:0 auto 與 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主要是讓”區塊本身”置中，像是在網頁切版時，想讓整個內容部份置中的時候，就常常會用到這個屬性
來看下面的範例

<div id="box">這是要置中的區塊</div>

#box{
  background-color:#FF9900;
  width: 400px;
  height: 100px;
}

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

在區塊上加入margin:0 auto，這個屬性主要是讓區塊本身置中，所以裡面的內容是不會置中的
margin:0 auto一定要配合設定width的屬性才可以運做喔~

JA-Anything