どうも、チャーさんです。
あなたは縦に中央寄せできるcssを、
探していませんか？
この記事ではお手軽に縦の中央寄せができる、
cssを紹介しています。
なのでこの記事を読めば、
あなたはweb制作など縦の中央寄せをすることが、
できるようになるでしょう。
ということで、あなたが、
縦の中央寄せをしたいと思っているなら、
このまま下にスクロールし読んでみてください。
スポンサードサーチ
cssで中央寄せ縦をやってみた(文字に)
でまずは結論からです。
cssで縦の中央寄せにするには、
display:flexとalign-self:centerを使うとできます。
ということで、早速実例を見せます。
はい、上記画像をみていただいて、
わかる通り、本文というテキストが、
縦に中央寄せされてますね。
（縦の中央がわかりやすいように、
横にdivで作ったボックスをおきました）
このようにflexのalign-self:centerは
縦に中央寄せすることが可能なcssなのです。
これは文字だろうと画像だろうとです。
とにかく要素を縦に中央寄せできます。
しかも便利なことにレスポンシブ対応してるので、
縦に中央をキープしたいならこれを使うのが便利ですね。
ではここからは具体的なやり方についてです。
スポンサードサーチ
縦に中央寄せする具体的な手順
やり方を簡潔にいうと、
親要素にdisplay:flexを指定し、
子要素にaling-self:centerを指定するです。
詳しく解説します。
flexで縦の中央寄せをするには、
まずは親要素と子要素を用意する必要が、
あります。
例えば以下のようにです。
例
<div class=”flex”>
<div class=”box”>本文</div>
<div class=”tate_center”>本文</div>
</div>
そして、親要素と子要素を用意したら、
上記の例のように、親要素にまず、
display:flex;を指定します。
上記例では、
.flex {
display:flex;
}
という感じです。
そして、次に子要素に、
align-self:center;を指定します。
これはあなたが縦に中央寄せしたい、
そう思ってる子要素にこのcssを指定します。
例を出すとこんな感じで、
<div class=”flex”>
<div class=”box”>本文</div>
<div class=”tate_center”>本文</div>
</div>
.tate_centerというクラス名がついてる
divを縦に中央寄せしてます。
とゆうことで、上記をまとめると、
親要素にdisplay:flexを指定し、
縦に中央寄せしたい子要素にalign-self:center;をする。
になります。
そうすると縦の中央寄せが可能になります。
スポンサードサーチ
まとめ
縦の中央寄せを可能にするcssですが、
flexのalign-self:center;を使えば、
縦に中央寄せが可能です。
他にもtable-cell、vertical-align:middle;
などを使えば縦の中央寄せは可能ですが、
flexが使い勝手がいいので、紹介しました。
ということで、縦の中央寄せがわかったと思いますので、
早速あなたの方でもやってみましょう。
実際にあなた自身が手を動かしてやると、
スキルアップになりコーディング関係の仕事を、
獲得したり、その仕事で稼いだりできますよ。
そして、復習になりますが、縦の中央寄せのcss、
やることは簡単です。
まずは親要素と子要素を用意し、
親要素にdisplay:flex;を指定。
そして縦に中央寄せしたい子要素に、
align-self:center;を指定する。
すると縦に中央寄せできますよ。
ということで、縦の中央寄せにするcssでした。
それでは読んでもらってありがとうございました。
チャーさん
