うさぎのイラスト

ネットアンサー55備忘録

ワードプレス技術を色々とお試しするサイトです。

vertical-alignで画像と文字合わせる。

-2015年06月01日-
vertical-alignの挙動を確認いたします。
.vastyle01{
	vertical-align:top;
}

.vastyle02{
	vertical-align:middle;
}

.vastyle03{
	vertical-align:bottom;
}

.vastyle04{
	vertical-align:text-bottom;
}

.vastyle05{
	vertical-align:4px;
}
<img src="img/images_3.jpg" />ygkpqfpこんばんわ
<br>
<img src="img/images_3.jpg" class="vastyle01"/>ygkpqfpこんばんわ
<br>
<img src="img/images_3.jpg" class="vastyle02"/>ygkpqfpこんばんわ
<br>
<img src="img/images_3.jpg" class="vastyle03"/>ygkpqfpこんばんわ
<br>
<img src="img/images_3.jpg" class="vastyle04"/>ygkpqfpこんばんわ
<br>
<img src="img/images_3.jpg" class="vastyle05"/>ygkpqfpこんばんわ

vartical無し

images_3ygkpqfpこんばんわ

top

images_3ygkpqfpこんばんわ

middle

images_3ygkpqfpこんばんわ

bottom

images_3ygkpqfpこんばんわ

text-bottom

images_3ygkpqfpこんばんわ

長さ指定

images_3ygkpqfpこんばんわ
参考サイト:html5experts
aaabbb
1ドリームウィーバー