Home >Web Front-end >HTML Tutorial >How to use CSS code to display and align images and text on the same line_html/css_WEB-ITnose
How to use CSS code to display and align images and text on the same line_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:554917browse
For novice friends who are new to CSS, they often encounter such a problem. When text and images appear in the same line or in the same div, the display when running in the browser The effects are often on different lines, so how can we use CSS code to display and align images and text on the same line?
For this phenomenon, there are three methods:
1. By adding "vertical-align:middle;" of css;
2 . If the image is a background image, you can set the background image in CSS, and then set the padding attribute of the text;
3. Put the text and image into different divs.
After many tests, the above three methods can all display pictures and text on the same line. Below, Ma Haixiang will use an example to operate it for everyone:
1. Add the "vertical-align:middle" attribute to the div in css
Some friends will find that if there are pictures and text in a line of content, the text will often be automatically aligned at the bottom, affecting the appearance. How to center them relatively vertically? It's very simple. Just add the CSS attribute: vertical-align:middle in the row where the image and text are located; in this way, they will be vertically aligned in the center on the same row.
Here, Ma Haixiang uses "registration, login, retrieval password" as an example, which is often encountered in practical applications, and makes "registration" and "login" into pictures, "retrieve password" Password" is set as text.
The html code is as follows:
The css code is as follows:
#denglu *{
vertical-align:middle; /* Center alignment, */
font-size:14px;
}
The rendering after running in the browser is as follows:
Using the "vertical-align:middle" attribute of CSS to align images and text on the same line is a very common method This method is also a method that is more conducive to code optimization and streamlining (for details, please check the relevant introduction on Ma Haixiang's blog "7 Principles of Website CSS Code Optimization"). I hope everyone can master it.
2. Set the image as a background image
If our image itself is a background image, we can use "background" in css to set the image. Then set the padding attribute of the text to display them on the same line.
The html code is as follows:
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 css, and then set the padding-left attribute of the text. In this way, the image and text are displayed on the same line, and the running result will not cut the image. You can try it yourself one time.
3. Put the text and pictures into different divs
The last method is to put the pictures and text into different divs. , and then use the "margin" attribute to position them so that they can be displayed on the same line.
The html code is as follows:
css code is as follows:
#zhaohuimima{
font-size:14px;
margin-top:-16px;
padding -left:50px;
}
After running it in the browser, you will find that this method can also display pictures and text on the same line, but it seems a little troublesome, so I still The first method is more recommended.
Reprinted from: http://www.mahaixiang.cn/css/1149.html