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

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

text-align:center

text-align:center主要是用在div或是區塊物件裡的文字p或是img,更具體一點可以說成是”行內物件”
大家可以試試下面的範例

<div id="outside">這是要置中的文字</div>
#outside{
  background-color:#FF9900;
  width: 400px;
  height: 100px;
}

這是還沒有加入text-align:center所得到的結果
002
現在加入text-align:center
003
附上完整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的結果
004-1
在區塊上加入margin:0 auto,這個屬性主要是讓區塊本身置中,所以裡面的內容是不會置中的
margin:0 auto一定要配合設定width的屬性才可以運做喔~
005

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *