• TOP
  • リストを左揃え中央寄せにするcss３選

最終更新日：

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

リストを左揃え央寄せにするcss

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

 

 

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

例えばこんな感じです。

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

↑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 {
  max-width: 1000px;
  width: 97%;
  margin: 0 auto;
  background: blue;
}

/*親要素*/
.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”>)は背景を青、リストの部分は灰色にしています。

 

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

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 {
  max-width: 1000px;
  width: 97%;
  margin: 0 auto;
  background: blue;
}

/*親要素*/
.text-left-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /*なくても良い↓*/
  text-align: left;
}

/*子要素(リスト部分)*/
.text-left-flex ul {
  background: #888;
  list-style: none;
  padding: 0;
}

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

デモを表示

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

 

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

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

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

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

この場合では「.text-left-flex」のtext-align: leftはなくても良いですが、「.text-left-flex」の親要素にtext-align: centerが指定してある場合はtext-align: leftは必須です。

こちらは一つのセレクタで左揃え中央寄せを実現できるため、一つ目のパターンよりはおすすめです。

backgroundプロパティは子要素に設定しないといけないため、今回のような場合には２つのセレクタを使う必要があります。

ただし、それすらも一つのセレクタで実現できるもっと良い方法があります。

 

一番おすすめ：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 {
  max-width: 1000px;
  width: 97%;
  margin: 0 auto;
  background: blue;
}

.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です。

この指定をすれば、たった一つのセレクタで左揃え中央寄せを実現できます。

先ほどの例ではbackgroundプロパティなどは子要素に指定しなければいけませんでしたが、こちらの場合では一つのセレクタに指定が可能です。

つまり、レイアウト・デザインを一緒に指定できるため、シンプルなcssとすることが可能です。

 

良くない例：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 {
  max-width: 1000px;
  width: 97%;
  margin: 0 auto;
  background: blue;
}

/*ダメな例*/
.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)を試してみてください！

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

関連記事

人気記事

カテゴリー

五平餅くんとは？

五平餅くんのイラスト

フリーランス５年目のHTMLコーダー。常に実務を意識した発信をして参ります！

お仕事のご相談はこちら