【CSS】画像やテキストを横に並べ中央ぞろえのにする方法
こんにちは。
WEBデザイナー兼プロ格闘家のショウイチです。
今日は、画像やテキストを横並びにし、上下中央で揃える方法を紹介します。
イメージはこんな感じ。
よく見るレイアウトですね。
それでは、今からその方法をご説明します。
画像とテキストを横並びにする
まず画像とテキストを横並びにする方法はいくつかあるのでそちらも紹介します。
サンプルコードはこちら。
今は縦に並んでいるこの犬の画像とテキストを横並べにしていきたいと思います。
float
1つ目はfloatです。
floatは簡単に、縦に並んでいた要素を横並びにすることのできるプロパティです。
実際につかってみます。
このように.img-boxにfloat: leftをかけると、犬の画像の右側にテキストが回り込みました。とても簡単ですね。
ですがfloatの機能はこれだけではありません。
text-box内の要素が画像より大きくなると自動で下に回り込んでくれます。
次にtext-boxのサイズを設定します。
すると、上記のように画像の下に文字が流れ込みません。
floatの場合は、中央に揃えるために画像やテキストの大きさを調整しないといけないので、少し手間がいりますね。
table
2つ目はdisplay: table;です。
これでは横並びにはなりましたが、高さが全然違いますね。
そんな時はvertical-alignで位置を調整してあげましょう。
これでテキストの位置を調整できます。
画像の下に余白がありますがこれは画像にvertical-align: middle;をかけることによって消えます。
このようにきれいに上下中央横並びになりましたね。
flex
3つ目はdisplay: flex;です。
このレイアウトは結構使っている方も多いと思います。
こちらも簡単に横並びにできましたね。
テキストの位置を変えたい場合は、align-itemsを使います。
するとvertical-alignと同じような効果が出ます。
画像とテキストの横並びはよくあるレイアウトなのでこれを覚えておくだけで、すぐに再現できますね。
是非参考にしてください。
それでは本日はここまで、また次回！
NEW POST
-
HEX, CMYK, RGB 変換出力
-
403エラー｜海外からWordPressのアクセスできない時の対処（ロリポップ）
-
スクショでHP全体を撮る方法（Mac）
