HTML&CSS

htmlテキストの上下左右中央揃えはどうするか？

htmlでは、テキストや画像を上下左右中央に持ってくることが多いです。
その方法は様々ありますが、デザインや状況に合わせて使い分けれるようになりましょう。

代表的な方法を紹介します。

左右中央に配置する

まずは、左右中央に配置する方法です。
例として以下の一般的なボタンで考えます。

ボタン

tex-aligin:center

text-align: center;で要素を左右中央に配置します。
ただ、中央に寄せたい要素がblock要素の場合は配置できません。

ボタン 
<a  class="btn"><span>ボタン</span></a>

.btn {
      display:block;
      height:50px;
      background: #000;
      color: #fff;
      width: 300px;
      border: 1px solid #231815;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
}

margin:0 auto;

中央寄せにしたい要素が、ブロック要素の場合（この例では、<span>をブロック要素にしています。）
margin:0 auto; で中央に配置できます。

ボタン 
<a  class="btn"><span>ボタン</span></a>

.btn {
      display:block;
      height:50px;
      background: #000;
      color: #fff;
      width: 300px;
      border: 1px solid #231815;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
}

display:flex; justify-content: center;

display:flexとjustify-content: center;を組み合わせて、中央寄せにします。
配置したい要素がインライン要素でもブロック要素でも真ん中に配置できます。

ボタン 
<a  class="btn"><span>ボタン</span></a>

.btn {
      display: flex; 
      justify-content: center;
      height:50px;
      background: #000;
      color: #fff;
      width: 300px;
      border: 1px solid #231815;
      font-size: 16px;
      cursor: pointer;
}

上下中央配置を考える

line-hight で配置する

line-heightは１行の高さになります。
これを上下中央に配置したい要素の高さと同じ値をしていします。
今回のボタンの高さは50pxなので、line-height: 50px;を指定する。
ただ、高さの高い要素や、高さが可変する要素などに使用するのは現実的ではないので、ボタンやアイコンなどにのみ使う方法になります。

ボタン 
<a  class="btn"><span>ボタン</span></a>

.btn {
      display: flex; 
      justify-content: center;
　　　line-height: 50px;
      height:50px;
      background: #000;
      color: #fff;
      width: 300px;
      border: 1px solid #231815;
      font-size: 16px;
      cursor: pointer;
}

padding で配置する

padding を使用して、上下中央に持ってきます。
こちらも高い要素に何百ピクセルも上下のpaddingを指定することは、現実的ではありませんが、ボタンなどによく使われています。
↓のボタンは上下左右paddingで中央に持ってきています。

ボタン 
<a  class="btn"><span>ボタン</span></a>

.btn {
    background: #000;
    color: #fff;
    border: 1px solid #231815;
    font-size: 16px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 100px;
}

display:flex 、align-items: center

display:flexとalign-items: center;を組み合わせて、上下中央寄せにします。
これにjustify-content: center;を組み合わせて上下左右中央寄せにすることがほとんどだと思います。
コードの量は増えますが、これがお手軽で分かりやすいです。

ボタン 
<a  class="btn"><span>ボタン</span></a>

.btn {
      display: flex; 
      align-items: center;
      justify-content: center;
      height:50px;
      background: #000;
      color: #fff;
      width: 300px;
      border: 1px solid #231815;
      font-size: 16px;
      cursor: pointer;
}

まとめ

以上　要素を上下左右中央配置でした。
flexを使うのが一番簡単ですね。

-HTML&CSS
-,