[CSS] 解決div區塊設定為display:inline-block時margin:0 auto無法置中的問題

Question:

在CSS內設定margin: 0 auto是很常見將div區塊水平置中的方法，
這樣區塊排版可以置中，但區塊內的文字又可以維持置左，
不過當display設定為inline-block時會發現無法置中。

Solve:

方法一：
HTML
<div id="myDiv">
  ...
</div>

CSS
#myDiv {
  display: table;
  margin: 0 auto;
}

這個方法將原先設定的inline-block改為table，
用法相當簡單，大部分情況也都可以符合～

方法二：
HTML
<div id="outerDiv">
  <div id="myDiv">
    ...
  </div>
</div>

CSS
#outerDiv {
  text-align: center;
}
#myDiv {
  display: inline-block;
  text-align; left;
}

方法二是在目標的div外再包一層div，
透過外層div設定文字置中，
目標的div排版就會水平置中了，
為了將目標的div內部文字維持預設值，
再設定文字為水平置左就可以囉～

參考來源：http://stackoverflow.com/questions/9313276/div-with-displayinline-block-margin-0-auto-not-center