How to use CSS code to make pictures and text appear and align on the same line

For beginners of CSS novice friends, often encounter such a problem, when the text and pictures appear in the same line or the same div, the display in the browser is often run in different lines, then, how can we use CSS code Make the picture and text appear and align in the same line?

For this phenomenon, there are 3 ways:

1, through the addition of CSS "VERTICAL-ALIGN:MIDDLE;" ；

2, if the picture is a background image, you can set the background image in the CSS, and then set the text padding properties;

3. Put the text and pictures into different div respectively.

After many tests, the above three methods can let the picture and text in the same line display, the following Ma Haixiang use examples to operate for everyone:

1. Add "Vertical-align:middle" attribute to Div in CSS

Some friends will find that if there are pictures in a line of text, the text will tend to automatically the bottom of the alignment, affect the appearance, how to make them relative to the vertical center , it is simple, is the picture and the text in the line to add CSS Properties : Vertical-align:middle, so that they are aligned vertically in the same row.

In this, Ma Haixiang with "registration, login, retrieve password" in the actual use of the situation is often encountered in the case of the "registration" and "Landing" into a picture, "Retrieve password" set into text.

The HTML code is as follows:

<div id= "Denglu" >


<a href= "#" > Retrieve password </a>
</div>

The CSS code is as follows:

#denglu *{
Vertical-align:middle; /* Center Alignment, */
font-size:14px;
}

After running in the browser, the following:

Using CSS's "vertical-align:middle" property to align Pictures and text on the same line is a very common approach and a way to optimize and streamline your code (see the Ma Haixiang blog, "7 Principles for CSS code optimization" of the relevant introduction), I hope you can master.

2, set the picture as the background image

If our picture itself is a background image, you can use "background" in the CSS to set the picture, and then set the Padding property of the text to make them appear on the same line.

The HTML code is as follows:

<div id= "Denglu" >
<div id= "Zhaohuimima" ><a href= "#" > Retrieve password </a></div>
</div>

The CSS code is as follows:

#denglu {
Background:url (login.gif) No-repeat left center;
}
#zhaohuimima {
font-size:14px;
padding-left:50px;
}

We set the background image in the CSS, and then set the text of the Padding-left property, so that the picture and text on the same line is displayed, the result is not cut graph, you can try it yourself.

3. Put text and pictures into separate div

Here is the last way to put the picture and text into different Div, and then use the "margin" property to locate, you can make them appear in the same line.

The HTML code is as follows:

<div id= "Denglu" >
<div id= "Zhuce" >
<div id= "Zhaohuimima" ><a href= "#" > Retrieve password </a></div>
</div>

The CSS code is as follows:

#zhaohuimima {
font-size:14px;
margin-top:-16px;
padding-left:50px;
}

After running in the browser, you will find that this method can also make the picture and the text appear in the same line, but it seems to be a bit troublesome, so the individual is more recommended the first method.

Transferred from: http://www.mahaixiang.cn/css/1149.html

How to use CSS code to make pictures and text appear and align on the same line