画像とテキストの横並びして、縦（垂直方向）中央揃えにする

2019-08-06

画像とテキストを横に並べてなおかつ画像の縦方向の真ん中にテキストを置きたい時あります。サイトのヘッダーなどでロゴ画像とサイトタイトルを並べたい時など。。。

floatやflexboxを使っても良いのですがシンプルにインライン要素でやりたい時のために。

画像とテキスト1行の場合

画像とテキストが1行の時の横並び、縦中央揃え。

htmlは下記のようにします。

注意するのは、imgとspanに改行を入れないこと。

インライン要素の横並びさせたい場合、コードに改行があると隙間ができます。改行コードの問題のようですが、この隙間をなくすには改行せずに記述することにします。

※この余白を取る方法はコメントアウトしたりletter-spacingで調整したりする方法もあります。

	<div class="section section2">
		<h1><a href="#"><img src="logo-32x32.png" alt="LOGO"><span>Web制作の覚え書き</span>
		</a></h1>
	</div>

css

.section2 img{
	margin-right:10px;
	vertical-align: middle;
}
.section2 span{
	vertical-align: middle;
}

テキストをspan要素で囲みインラインブロックとして扱います。インライン要素ということでvertical-alignが有効になります。

画像とテキスト複数行の場合

テキストが複数行だった場合の縦方向中央揃え。

htmlはこのような感じ

<div class="section section4">
	<a href="#"><img src="logo80.png" alt="LOGO" class="logo"></a><div class="site-title"><h1>Web制作の覚え書き</h1><p>ウェブデザイン,コーディング,サーバーなどウェブやMacのこといろいろ</p></div>
</div>

テキストはh1とpタグで囲んでいます。img要素と横並びにするためにh1,pをdiv.site-titleでひとかたまりにします。

CSSは以下の通り

.section4 .logo{
	margin-right:6px;
	vertical-align: middle;
		}
.section4 .site-title{
	display: inline-block;
	vertical-align: middle;
}
.section4 h1{
	margin: 0;
	font-size:22px;
}
.section4 p{
	margin:0;
	line-height: 1;
}

vertical-alignを有効にするために.site-titleをdisplay:inline-blockでインラインにし、vertical-align:middleを指定します。

テキストを縦中央にするためpタグをline-height:1にして行の高さをフォントサイズと同じにします。

以上、インライン要素として画像とテキストを横並びにして縦方向中央に揃えるでした。