How to use CSS code to display and align images and text on the same line_html/css_WEB-ITnose

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:

　

　Retrieve password
　

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:

　

Retrieve password

　

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:

　

　

Retrieve password

　

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

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Show More

Hot Article

How to fix KB5055612 fails to install in Windows 10?

4 weeks ago By DDD

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Roblox: Grow A Garden - Complete Mutation Guide

3 weeks ago By DDD

Nordhold: Fusion System, Explained

4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook

3 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Show More

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Show More

Hot Topics

Java Tutorial

1672

14

CakePHP Tutorial

1428

52

Laravel Tutorial

1332

25

PHP Tutorial

1276

29

C# Tutorial

1256

24

Show More