タイトルの横にマーク画像をつける
見出し部分の横にマークをつけて、他の部分との差別化を測りたい…。
そんな時に「border」で、■を横につけるのもいいんですが…できれば画像が使いたい…というときもありますよね。
少なくとも円は「border」では表示不可能ですし。
<h2 class="mark"><img src="画像のアドレス.jpg" alt="画像の内容" width="横サイズ" height="縦サイズ"></h2>
h2 img{
vertical-align:middle;
}
.mark{
margin-left:0.3em;
}
vertical-align:middle;
}
.mark{
margin-left:0.3em;
}
vertical-alignでマークとテキスト画像を縦に中央揃えしています。
margin-leftでマークとテキストの間隔を指定しています。