CSSでセンター寄せはどう書き分けるべきか

CSS HTML 雑談 開発

やあやあ。

HTML5ではcenterタグが非推奨になっているらしいね。

と言う事で、要素の中央寄せをCSSでする方法についてのメモを残しておくよ。

 

  • marginプロパティ
    • margin:auto
    • margin-left:auto + margin-right:auto
  • text-alignプロパティ
    • text-align:center

実際は上記のようなプロパティをCSSから指定することになる。

margin系とtext-align系の大きな違いは何であろうか。

 

margin系で中央寄せをする場合

margin系は、指定されたオブジェクトを寄せます。

その場合、オブジェクトの中身（ここでは文字列）は左詰めのままの解釈を受ける。

 

<style>
  #margin_test{
    width: 200px;
    margin: auto;
    background-color: #808080;
  }
</style>

<div id="margin_test">てすとてすと</div>

 

てすとてすと

 

<style>
  #margin-left_test{
    width: 200px;
    margin-left: auto;
    background-color: #808080;
  }
</style>

<div id="margin-left_test">てすとてすと</div>

 

てすとてすと

 

<style>
  #margin-right_test{
    width: 200px;
    margin-right: auto;
    background-color: #808080;
  }
</style>

<div id="margin-right_test">てすとてすと</div>

 

てすとてすと

 

<style>
  #margin_LRmix_test{
    width: 200px;
    margin-right: auto;
    margin-left: auto;
    background-color: #808080;
  }
</style>

<div id="margin_LRmix_test">てすとてすと</div>

 

てすとてすと

 

text-align系で中央寄せをする場合 

text-align系で中央寄せをする場合、オブジェクトはそのオブジェクトの指定属性のまま、その中身（ここでは文字列）が中央寄せの解釈を受ける。

<style>
  #text-align_test{
    width: 200px;
    text-align: center;
    background-color: #808080;
  }
</style>
  
<div id="text-align_test ">てすとてすと</div>

 

てすとてすと

 

どっちを使うべきか

中央寄せしたいモノで決めよう

 

但し、margin-leftとmargin-rightの合わせ技で中央揃えをする場合、古いIEでは適切に解釈されない可能性がある事を知っていないと罠に嵌る。