カテゴリー:
CSS
タグ:
 css センタリング

このエントリーをはてなブックマークに追加
更新日時:
2013年07月24日(水)
作成日時:
2013年07月24日(水)

前の記事 / 次の記事

結論から言うとテーブルを使う。

なんだよテーブルかよ!って話だけど、JavaScriptを使わない限り
幅の分からない、または幅が可変な要素をセンタリングする方法っていうのは
テーブルを使う以外たぶんない。ないはず。と思う。あったら教えて。

参考ページ:[CSS]サイズが分からない要素を真ん中に配置するテクニック

方法1. 素直にテーブルを使う

-# haml
%table.table-centering
  %tr
    %td
      %ul
        %li みじかい文字列
        %li ながぁあああああああああああああああい文字列

:sass
  .table-centering
    margin-left:  auto
    margin-right: auto

方法2. テーブルを使っていることにする

-# haml
%div.centering-outer
  %div.centering-inner
    %ul
      %li みじかい文字列
      %li ながぁあああああああああああああああい文字列

:sass
  .centering-outer
    display: table
    margin-left:  auto
    margin-right: auto

    .centering-inner
      display: table-cell