どうも、ソエです!

今回は、中央揃えに出来るCSSを私が使いやすいな、と思うものだけまとめてみました!

では早速行きましょう!

左右中央揃え

まずは左右の中央揃えから!

text-align: center;

今回は、中央揃えに出来るCSSをまとめてみました!


これはインラインの子要素にきくらしく、画像でもテキストでも大丈夫そうです!
ただ、上下中央にはできないみたいなので、左右だけが対象なのは覚えておきましょう!

コードは以下の通り。

HTML

<div class=”center”>
<p>今回は、中央揃えに出来るCSSをまとめてみました!</p>
</div>

CSS

.center{
text-align: center;
}

margin: 0 auto;

今回は、中央揃えに出来るCSSをまとめてみました!


よくレイアウトの時なんかに使います。
注意するところは、widthの指定が必須なところです。覚えておきましょう!

コードは以下の通り。

HTML

<p class=”center””>今回は、中央揃えに出来るCSSをまとめてみました!</p>

CSS

.center{
width: 30%;
margin: 0 auto;
}

上下中央揃え

次は上下中央揃え!

display: flex;とalign-items: center;

今回は、中央揃えに出来るCSSをまとめてみました!

flexで使用するalign-itemsを利用したやり方です。
flexはコンテンツを横並びにするのによく使用されますが、こういう使い方もあったり!

コードは以下の通り。

HTML

<div class=”center””>
<p>今回は、中央揃えに出来るCSSをまとめてみました!</p>
</div>

CSS

.center{
display: flex;
align-items: center;
}

終わりに

いかがでしたか?これらのCSSなら、気にする要素も少なく使いやすいかと思います!

中央揃えはサイトでも使われることが多いと思うので、覚えて損はないかな~と思いまして!

上下左右中央揃えについては、組み合わせれば問題ないかと思います!

ではご閲覧ありがとうございました!

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ CSS/

CSSで使いやすい中央揃え