インライン画像と文字を揃えたい時のHTML作法

今時のテキストは、文中に絵文字を入力できるので、たいていのマーク類は多くのemoji種類から選べるが、ない時は画像をインラインで挿入するしかない。簡単そうだが、cssで随分に微調整しなくてはならず、面倒なので、レガシーcssに含めて、自己標準化してしまおう、ってはなし。

マージンで上下を調整

ずれるのは上下なので、調整できるCSSは「margin」「vertical-align」だ。この２つを使うのは、時にそのテキストを四角くボーダーで囲んだりする場合があるからで、ただの単純なテキストならどちらか１つでいい。

HTMLでする場合

<p>
日曜日は
<spam style="margin:0 3px; vertical-align : 2px;">
<img src="images/icons/ittuu.png"
width="12px" 
height="12px" 
alt="一方通行マーク" 
style="margin-bottom:2px;" />
公園通り
</spam>
区間車両通行止め
</p>

CSSにする場合

<!-- inline-img というclassを使うと想定した場合 -->
p img.inline-img {
margin:0 3px; vertical-align : 2px;
}