リストを左揃え中央寄せにするcss3選

  • このエントリーをはてなブックマークに追加
リストを左揃え央寄せにするcss

こんにちは。五平餅くんです。

 

 

テキストを左揃え中央寄せにしたい場面って実務では結構あると思います。

例えばこんな感じです。

左揃え左右中央寄せ

しかし、text-align: leftにすると左よせになってしまいますし、そこにmargin: autoを指定してもうまくいきません。

text-align: leftにすると左よせ
↑text-align: leftとmargin: autoしてもうまくいかない例

今回はテキストは左揃えだけど、中央に寄せたい時のcssを3パターンご紹介指定と思います!

 

一番一般的な方法:親要素にtext-align: center

まずは一番一般的な方法です。

親要素にtext-align: centerを指定し、子要素にtext-align: leftとdisplay: inline-blockを指定します。

<div id="content">
  <div class="inner">
    <div class="text-center-text-left-wrap">
      <ul class="text-center-text-left__child">
        <li>
          テキストテキスト
        </li>
        <li>
          テキストテキストテキストテキストテキストテキスト
        </li>
        <li>
          テキストテキストテキストテキスト
        </li>
        <li>
          テキストテキスト
        </li>
        <li>
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </li>
        <li>
          テキストテキストテキストテキスト
        </li>
        <li>
          テキストテキストテキストテキストテキストテキスト
        </li>
        <li>
          テキスト
        </li>
        <li>
          テキストテキストテキストテキストテキストテキストテキストテキスト
        </li>
        <li>
          テキストテキスト
        </li>
      </ul>
    </div>
  </div>
</div>
.inner {
  width: 1000px;
  margin: 0 auto;
  background: blue;
}

@media screen and (max-width: 999px) {
  .inner {
    width: 97%;
  }
}

/*親要素*/
.text-center-text-left-wrap {
  text-align: center;
}

/*子要素(リスト部分)*/
.text-center-text-left__child {
  text-align: left;
  display: inline-block;
  background: #888;
  list-style: none;
  padding: 0;
}

上のコードのデモは下のボタンから↓

※わかりやすいように、サイト幅(<div class=”inner”>)は背景を青、リストの部分は灰色にしています。

 

このパターンでは、2つのセレクタに指定しなければならないので少し面倒ですが、一番わかりやすいとは思います。

text-align: center(テキスト中央揃え)を子要素に適用させたい時は、子要素をインラインブロック要素にする必要がありますので、

display: inline-blockは忘れずに記述するようお願い致します。

 

flexboxを使う例:align-items: centerとalign-self: center

次にご紹介するのは、flexboxを使う例です。

<!--flexboxの場合-->
<div id="content">
  <div class="inner">
    <div class="text-left-flex">
      <ul>
        <li>
          テキストテキスト
        </li>
        <li>
          テキストテキストテキストテキストテキストテキスト
        </li>
        <li>
          テキストテキストテキストテキスト
        </li>
        <li>
          テキストテキスト
        </li>
        <li>
          テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
        </li>
        <li>
          テキストテキストテキストテキスト
        </li>
        <li>
          テキストテキストテキストテキストテキストテキスト
        </li>
        <li>
          テキスト
        </li>
        <li>
          テキストテキストテキストテキストテキストテキストテキストテキスト
        </li>
        <li>
          テキストテキスト
        </li>
      </ul>
    </div>
  </div>
</div>
.inner {
  width: 1000px;
  margin: 0 auto;
  background: blue;
}

@media screen and (max-width: 999px) {
  .inner {
    width: 97%;
  }
}

/*親要素*/
.text-left-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/*子要素(リスト部分)*/
.text-left-flex ul {
  background: #888;
  list-style: none;
  padding: 0;
  /*なくても良い↓*/
  text-align: left;
}

上のコードのデモは下のボタンから↓

※わかりやすいように、サイト幅(<div class=”inner”>)は背景を青、リストの部分は灰色にしています。

 

この例では、flexboxを使用しています。

display: flexにした時、justify-content: centerとalign-items: centerを一緒に指定すれば上下左右中央寄せになります。

<ul>の下に、何か別のリストやテキストを表示したい場合に備えて、flex-direction: columnを指定して、子要素を縦並びにしてあげています。

flex-direction: columnを指定しない場合、直下の子要素が二つ以上あるときに横並びになってしまいます。直下の子要素が一つなら問題ないですが、指定しておいた方が無難です。

この場合では、「.text-left-flex ul」のtext-align: leftはなくても良いので、左寄せ中央揃え自体は一つのタグで実現できます。

なので、一つ目のパターンよりはおすすめです。

しかし、「.text-left-flex」よりも上の親要素(例えばbodyなど)にtext-align: centerを指定しているとき、「.text-left-flex ul」のtext-align: leftは必須です。

そういった場合では二つのセレクタを用いることになります。

最後にご紹介する例は一つのセレクタで実現できてしまうので、一番おすすめです。

 

一番おすすめ:display: tableを使う

こちらは一番おすすめです。

なぜなら、最もシンプルなcssだからです。

<!--display: tableの場合-->
<div id="content">
  <div class="inner">
    <ul class="text-left-margin-auto">
      <li>
        ・テキストテキスト
      </li>
      <li>
        ・テキストテキストテキストテキストテキストテキスト
      </li>
      <li>
        ・テキストテキストテキストテキスト
      </li>
      <li>
        ・テキストテキスト
      </li>
      <li>
        ・テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      </li>
      <li>
        ・テキストテキストテキストテキスト
      </li>
      <li>
        ・テキストテキストテキストテキストテキストテキスト
      </li>
      <li>
        ・テキスト
      </li>
      <li>
        ・テキストテキストテキストテキストテキストテキストテキストテキスト
      </li>
      <li>
        ・テキストテキスト
      </li>
    </ul>
  </div>
</div>
.inner {
  width: 1000px;
  margin: 0 auto;
  background: blue;
}

@media screen and (max-width: 999px) {
  .inner {
    width: 97%;
  }
}

.text-left-margin-auto {
  display: table;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  background: #888;
  list-style: none;
  padding: 0;
}

上のコードのデモは下のボタンから↓

僕もこの方法は最近知り、感動しました。

margin: autoで中央に寄せたい時は必ずwidthを指定しなければならないのですが、

実は表を表示する時に使う<table>は、widthを指定しなくてもmargin: autoで中央寄せができるのです。

そして、display: tableは<table>に変身させるcssです。

この指定をすれば、margin: autoも効くし、text-align: leftも効くので、たった一つのセレクタで左揃え中央寄せを実現できます。

 

良くない例:widthを指定してmargin: auto

最後に良くない例です。

※良くない例なので飛ばしても構いません。

 

<!--良くない例-->
<div id="content">
  <div class="inner">
    <ul class="text-left-margin-auto-bad-example">
      <li>
        ・テキストテキスト
      </li>
      <li>
        ・テキストテキストテキストテキストテキストテキスト
      </li>
      <li>
        ・テキストテキストテキストテキスト
      </li>
      <li>
        ・テキストテキスト
      </li>
      <li>
        ・テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト
      </li>
      <li>
        ・テキストテキストテキストテキスト
      </li>
      <li>
        ・テキストテキストテキストテキストテキストテキスト
      </li>
      <li>
        ・テキスト
      </li>
      <li>
        ・テキストテキストテキストテキストテキストテキストテキストテキスト
      </li>
      <li>
        ・テキストテキスト
      </li>
    </ul>
  </div>
</div>
.inner {
  width: 1000px;
  margin: 0 auto;
  background: blue;
}

@media screen and (max-width: 999px) {
  .inner {
    width: 97%;
  }
}

/*ダメな例*/
.text-left-margin-auto-bad-example {
  width: 650px;
  margin-left: auto;
  margin-right: auto;
  background: #888;
  list-style: none;
  padding: 0;
}

@media screen and (max-width: 649px) {
  .text-left-margin-auto-bad-example {
    width: 100%;
  }
}

上のコードのデモは下のボタンから↓

この例では、テキスト(文言)の長さに合わせてwidthを指定し、margin: autoで中央寄せしています。

見た目はできているようですが、widthを指定するのは良くないです!

なぜ良くないのかというと、

  • テキスト(文言)は様々なので、同じパターンのデザイン(文言)が二回以上出てくる時、毎回新しいwidthを指定しなければならない。
  • テキスト(文言)が少し変更になるたびにcssの変更が必要になる。

 

毎回cssを記述するのは手間ですし、テキスト(文言)変更のたびにいちいち修正するのも面倒です。

お恥ずかしながら、実は僕が、最近までこの指定方法をしていました。

ただ、cssはできるだけ共通で使いまわせた方が良いので、面倒なものはなるべく避けましょう!

 

まとめ

今回は以上になります。

最後の例(display: table)で左揃え中央寄せはだいたい実現できると思いますが、もしうまくいかない時は、一つ目(親要素にtext-align: center)や二つ目(flexbox)を試してみてください!

最後まで読んでいただき、ありがとうございました。

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。