スタイルシートマニア

画像の隣にくるテキストの縦揃え | ホームページカスタマイズ Tips

画像に続いて文字を表示させる時の縦の位置を調整するスタイルです。

縦方向の位置を調整する場合は、vertical-alginプロパティを使います。

.vertical-algin_middle img {
      vertical-algin: middle;
      margin-right: 5px;
}

<div class=”vertical-algin_middle”>
<p><img src=”source-marin_logo.gif” wudth=”178″ height=”94″ alt”ソースマリンlogo” />ホームページ制作ならソースマリン</p>
</div>

vertical-alginで指定できるプロパティの値は

  • baseline
  • top
  • middle
  • bottom
  • text-top
  • text-bottom
  • super
  • sub

の8種類です。

ちなみに一行分しか調節できないので長い文章を入れる場合は他の方法を考えなければいけないでしょう。

Author:hideo
Comments:0

hideo

コメントを残す