みなさんこんにちは。Saitoです。

Webデザインで中央寄せしたいことって頻繁にありますよね。ネット検索すると左右中央寄せの記事はたくさん出ており、その手法もいろいろあります。

今回この記事では、その解決法の一つである「text-align: center;」を書いてみたのに、なぜか左右中央寄せにならないとお困りの方向けに、チェックポイントとその解説を記載していきます。

まず前提条件

こんな感じで、親要素(グレー)に対し、子要素(オレンジ)を左右の中央に配置したいとします。

上記の状態はこんな感じのソースコードで作れます。

<div class="container">
    <div class="inner"></div>
</div>
<style>
    .container {
        background-color: #e6e6e6;
        width: 500px;
        height: 100px;
        text-align: center;
    }
    .inner {
        display: inline-block;
        background-color: orange;
        width: 300px;
        height: 80px;
    }
</style>

同じように、text-align: center; を使用しているのに子要素が中央寄せにならないのだとしたら、以下の点をチェックしてみてください!

チェックポイント① 子要素に指定してしまっている。

text-align: center; を記述しないといけないのは「親要素」にです!
これを子要素のCSSに記述しても左右中央寄せにはなりません。

チェックポイント② 子要素がインライン要素でない。

text-align: center; は、子要素が「インライン要素」でないと効きません! pタグ,divタグであったり、CSSにdisplay: block;と記述されている場合、その子要素はブロック要素になっています。
上記の例の場合、innerクラスの要素を以下のどれかの方法でインライン要素にする必要があります。
 1.display: inline-block; (もしくはinline)で、その要素をインライン要素にする。
 2.もともとインライン要素であるタグを使用する。(a, img, spanなど。ネットでそのタグのデフォルトのdisplay属性を調べてみてください。)

チェックポイント③ 子要素にposition: absolute; が指定されている。

position: absolute;が指定されていると、text-alignでは左右中央寄せされません。詳しい説明は省きますが、以下のような対策が必要です。
 1.position: relative; にする。(おそらく理由があってabsoluteにしていると思うので、この変更を実施しても問題ない場合のみ有効。)
 2.子要素にmargin: auto;を適用した左右中央寄せに方針を変更する。その場合、同じ子要素にleft: 0; right: 0; の記述も必要。

まとめ

上記のポイントが抑えられていれば、おそらくしっかりと左右中央寄せされたのではないかなと思います。今回はtext-alignに絞って解説しましたが、ほかの書き方でのポイントも解説していく予定です。上記の内容で不足があればご連絡お待ちしております。

集客に強いホームページの制作はこちら
サンプルサイトはこちら

関連記事

  • 関連記事
  • おすすめ記事
  • 特集記事
TOP