CSS 中央, 右, 左寄せの方法メモ

概要

マークアップに慣れるまで縦横 中央,右,左寄せを毎回調べていたのでメモ
本記事の方法以外にも手法はあるがよく使うものだけ抜粋

前提: ボックスモデルとは

1. インラインボックス
   1. <span>, <a>など、同一行で横並びに配置されるもの
   2. 幅・高さの指定はできない
   3. 上下マージンの指定はできない
2. ブロックボックス
   1. <div>, <p>, <ul>, <ol>, <table>など上から下に配置されるもの
   2. 幅・高さ・パディング・マージンを設定できる

text-align

条件

1. 親がブロック要素である
2. インライン要素の左右に余白があること
3. 子のインライン要素が移動する

利用方法は

1. 親のブロック要素に対して text-alignを設定する

●HTML -------------------------------
<div class="outer"> // ブロック要素
    テキストテキストテキスト // インライン要素
</div>

●CSS ---------------------------------
.outer {
  width: 100%;
  // 以下を追加
  text-align: center; //left, rightなど
}

mdn: https://developer.mozilla.org/ja/docs/Web/CSS/text-align

margin

条件

1. ブロック要素の左右に余白があること
2. ブロック要素ごと移動する

利用方法は

1. ブロック要素に対してmargin: 0 autoを設定する
2. 縦移動についても同じ

●HTML -------------------------------
<div class="outer"> // ブロック要素
    <div class="inner">  // ブロック要素
        テキストテキストテキスト // インライン要素
    </div>
</div>

●CSS ---------------------------------
.outer {
  width: 100％;
  height: 1000px;
}
.inner {
  width: 50%  // 親要素の半分の横幅を指定して余白を作る
  height: 200px;
  // 以下を追加
  margin: 0 auto;
}

display: flex

条件

1. 子のブロック要素の左右に余白があること

利用方法は

1. 親に対して
   1. display: flex
   2. justify-content: center // 横移動
   3. align-items: center // 縦移動

●HTML -------------------------------
<div class="outer"> // ブロック要素
    <div class="inner">  // ブロック要素
        テキストテキストテキスト // インライン要素
    </div>
</div>

●CSS ---------------------------------
.outer {
  width: 100％;
  height: 1000px;
  // 以下を追加
  display: flex;
  justify-content: center;
  align-items: center;
}
.inner {
  width: 50%  // 親要素の半分の横幅を指定して余白を作る
  height: 200px;
  margin: 0 auto;
}

mdn: https://developer.mozilla.org/ja/docs/Web/CSS/justify-content