• web制作

【CSS】画像とテキストを中央で揃える方法【vertical-align】

大和田
このエントリーをはてなブックマークに追加

画像とテキストを真ん中で一列に並べて表示したい時のコードや方法を軽くまとめ。
そして、vertical-alignについての説明です。
※201504-大幅修正

画像とテキストの縦揃え

まずはhtmlで画像とテキストを横にただ並べてみます。

<!-- html -->
<p class="anago"><img src="画像の名前"> テキストを中央揃え!</p>

140922_blog03

このような感じで、テキストと画像がうまく中央で並んでくれません。
(vertical-alignプロパティ基準値が【baseline】のため)

というわけでテキストや画像などの縦方向の揃え位置を指定できるvertical-alignの番です。
ー駄目なやつー

/*css*/
.anago{
 vertical-align:middle;/*middleは中央揃え*/
}

全体を囲むpに対してcssを書きたくなりますね。・・・なりますよね?
しかし、vertical-alignはブロック要素 (p) には使えません。ので何も変わらないのです。

※ブロック要素とインライン要素に関してはこちらのサイト様がわかりやすかったです。

というわけで!
ーいいやつー

/*css*/
.anago img{
 vertical-align:middle;
}

とインライン要素であるimgに対して書くと・・・。

140922_blog04

見事に中央揃えができました。

ブロック要素同士を並べる場合

<!-- html -->
<div class="anagoBox">
 <p><img src="画像の名前" alt="チンアナゴ"></p>
 <p>テキストを中央揃え!<p>
</div>
/*css*/
.anagoBox p{
 display:inline-block;
 vertical-align:middle;
}

これでなんとかなります。

140922_blog05

Pはブロック要素なので、display:inline-block;でインライン的ななにかに変えています。
150417_blog01s
テキスト一行だけならこれで問題ないですね。

※display:inline-blockで横並びにすると、要素間に隙間が出来るのできっちりとした幅で並べたい時はあまりおすすめできません。

テキストを複数行均等に並べたい

まずはhtmlに画像とテキストを入れてみましょう。

<!-- html -->
<div class="anagoBox02">
 <p><img src="画像の名前" width="200" height="200" alt="チンアナゴ"></p>
 <p>・ウナギ目アナゴ科に属する海水魚の一種<br>
 ・日本では高知県から琉球列島にかけて分布<br>
 ・動物プランクトンを捕食している</p>
</div>

140922_blog06

全てがブロック要素なので縦に並びますね。

/*css*/
.anagoBox02 p{
 display:inline-block;
 vertical-align:middle;
}

150417_blog02

先ほどと同じようにブロック要素であるPをinline-blockにしてvertical-align:middle;を加えればokです。

均等配置のcss

並べるだけなら特に問題ないのですが、真ん中により過ぎている気がします。
均等配置をする場合はこうなります。

/*css*/
.anagoBox02 p{
 display:inline-block;
 vertical-align:top;
 line-height:66px;/*画像の高さ÷テキストの行数*/
}

140922_blog07

vertical-alignをmiddleではなくtopに設定して、画像の高さを行数で割った数値をテキストの高さを決めるline-heightにいれると均等になります。

仕方ないことですが、行数が増えたり減ったりするとずれるので注意です。

縦幅が短い画像に対して複数行テキストを入れ、上で揃える

時々見るこのようなレイアウトの作り方です。

140922_blog08

<!-- html -->
<div class="anagoBox03">
 <p><img src="画像の名前" width="200" height="50" alt="チンアナゴ"></p>
 <ul>
  <li>・ウナギ目アナゴ科に属する海水魚の一種</li>
  <li>・日本では高知県から琉球列島にかけて分布</li>
  <li>・動物プランクトンを捕食している</li>
 </ul>
</div>
/*css*/
.anagoBox03 p, .anagoBox03 ul{
 display:inline-block;
 vertical-align:top;
 line-height:50px;/*画像の高さと同じ数値*/
}

vertical-alignに対するモヤモヤを感じる人の助けになれれば幸いです。

rss登録
このエントリーをはてなブックマークに追加