html - How to Vertically Center Images on a Line? -

If images are smaller than the height of the line, then what is the best way to symbolize the center on the line?

For example (easy to read style inline):

  & lt; Div style = "row-height: 20px" & gt; & Lt; Img style = "width: 12px; height: 12px;" /> Blah blah blah & lt; / Div & gt;  

This example also shows why vertical-align: middle does not work.

I want the IIG to be centered against Diva's text. That is, even if the text is wrapped in several rows, the image will be centered against a line. Ideally, the solution will not include setting the merging / padding on the image and it will still work unless I am not line-height Address.

I have read what:

(related to cases where the image is large, does not apply here)

The reason for your problem is that the image is centered vertically in comparison to the surrounding text, it can be clearly seen on an extended screenshot where the surrounding text Has been included:

The picture is aligned similarly, whether you use the font size or the height of the line, therefore, in a typographic sense, the image is actually vertically vertical However, if you want to adjust the alignment, the center of the image is close to the mean line, just click it margin-down :

  Img.icon {margin-down: 0.25em; }  

The value of 0.25 m is arbitrarily selected, which is good when I tried to do it. Easily adjust according to the taste.

Here it is with different font sizes.