The CSS single-line picture is centered vertically with the text

One-line picture is centered vertically with text, which is to add vertical-align:middle to the style attribute in the IMG tag

If you do not set, a single line of pictures and text side-by, the text defaults to the bottom center.

Note the following code for the IMG tag, without setting any of the style attributes,

<! DOCTYPE html>  
 

The run effect is as follows, where the Div float:left, Clear:both, and so on, just for the layout, the two pictures are in one row, the problem is not the point.

About the layout of Div, you can refer to: "CSS" about div alignment and page layout (click to open the link)



This, the text and the bottom of the picture alignment should not conform to most people's aesthetic, single line of pictures and text together, the text should be centered vertically, as shown in the following figure:



At this point, in the IMG to fill up a vertical-align:middle;

The source code for the above effect is as follows:


<! DOCTYPE html>  
 

For Vertical-align:middle attributes, the only thing to note is that you don't put them in a div, because elements like <div>, <span> are not valign. Therefore, using vertical-align does not work for them.

When there is no high row height, we simply apply vertical-align:middle to the inline elements; In addition to a picture and the height of the text is similar, do not use this style is also possible.

For rows of high or row height + height, ff can be correctly displayed, IE6 failure. So you can only use Kack for the following version of IE6. Now the IE7 has corrected the mistake.