How to align pictures and 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.

Method One,

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 to enable the picture and text to be on the same horizontal line

<Div><Div>Text and picture alignment<spanstyle= "Vertical-align:middle;"><imgsrc= "B-grade.png"></span></Div><BR><Div>Text and picture alignment<spanstyle= "Vertical-align:baseline"><imgsrc= "B-grade.png"></span></Div><BR><Div>Text and picture alignment<imgsrc= "B-grade.png"></Div><BR><Div>Text and picture alignment<spanstyle= "Vertical-align:bottom"><imgsrc= "B-grade.png"></span></Div><BR><Div>Text and picture alignment<spanstyle= "Vertical-align:sub"><imgsrc= "B-grade.png"></span></Div><BR><Div>Text and picture alignment<spanstyle= "Vertical-align:super"><imgsrc= "B-grade.png"></span></Div><BR><Div>Text and picture alignment<spanstyle= "Vertical-align:text-bottom"><imgsrc= "B-grade.png"></span></Div><BR><Div>Text and picture alignment<spanstyle= "Vertical-align:text-top"><imgsrc= "B-grade.png"></span></Div><BR><Div>Text and picture alignment<spanstyle= "Vertical-align:top"><imgsrc= "B-grade.png"></span></Div></Div>

Method two, usually picture and text together when the picture tends to be biased, by setting the Margin-bottom can reach the bottom of the text picture of the purpose of alignment

When we do the Web page, we will encounter a picture and text position on the problem of misalignment. (generally shown in the picture is always higher than the text)

The best way to solve the problem:. A key attribute: Margin-bottom The text can be moved up by modifying the bottom height of the outer border of the picture. This is done by setting this value to a negative number. For example, we put the following picture of 16x15 to set its

<src= "Bottom.gif"  style= "margin-bottom:-3px">

or set it inside the style.

img {margin-bottom:-3px;}

So the text and picture are centered. This value changes with the size of the picture, the specific test you know.

Method Three,

li{margin:0px;padding:20px 3px 3px 8px;background:url (images/sohu_06.jpg) no-repeat 0 50%;list-style-type:none; List-style-position:inside;}

How to align pictures and text