CSS controls the alignment of the picture with the text

With the text next to the picture, found that the picture is higher than the text, the original default is the picture top alignment and text bottom alignment, by setting CSS properties can make the picture and text alignment.

Set the Vertical-align property of each object, property Description:
Baseline-aligns the contents of objects that support the valign feature with the baseline
sub-Subscript for vertical aligned aligned
super-the superscript of vertical aligned aligned
Top-aligns the contents of objects that support the valign attribute with the top of the object
text-top-aligns the text of the object that supports the valign attribute with the top of the object
Middle-aligns the contents of objects that support the valign attribute with the middle of the object
bottom-aligns the text of the object that supports the valign attribute to the bottom of the object
text-bottom-aligns the text of the object that supports the valign attribute with the top of the object

This is set to Text-bottom can achieve the picture and text on the same horizontal line, much better looking

<div>
<div> text and picture alignment <span style= "Vertical-align:middle;" ></span></div>
<br>
<div> text and picture alignment <span style= "Vertical-align:baseline" ></span></div>
<br>
<div> text and picture alignment </div>
<br>
<div> text and picture alignment <span style= "Vertical-align:bottom" ></span></div>
<br>
<div> text and picture alignment <span style= "vertical-align:sub" ></span></div>
<br>
<div> text and picture alignment <span style= "Vertical-align:super" ></span></div>
<br>
<div> text and picture alignment <span style= "Vertical-align:text-bottom" ></span></div >
<br>
<div> text and picture alignment <span style= "Vertical-align:text-top" ></span></div>
<br>
<div> text and picture alignment <span style= "Vertical-align:top" ></span></div>
</div>

CSS controls the alignment of the picture with the text