WEB制作(html・css(スタイルシート))に関する各種メモ書き

テキストとアイコン画像の位置を揃えるCSS

● テキストとアイコン画像の位置を揃えるCSS

例 ) このようなhtmlの場合、アイコン画像がテキストより大きい場合表示がずれます

<p>
	<span>テキスト</span>
	<img class="icon" src="speaker.png">
</p>

そこで次のような icon クラスを定義して位置を調整します。

.icon {
  position: relative;
  top: 8px;
  left: 5px;
}

デモはこちら
https://pgmemo.tokyo/data/filedir/1251_1.html

添付ファイル1
No.1251
08/09 10:16

edit

添付ファイル