How to align words and images in css-CSS Tutorial-php.cn

How to align words and images in css

藏色散人

Release： 2023-01-04 09:38:47

Original

22838 people have browsed it

How to align words and pictures in css: 1. Align words and pictures by adding "vertical-align:middle;" of css; 2. Align words and pictures by setting a background image in css Alignment; 3. Put the text and pictures into different divs to align the words and pictures.

How to align words and images in css

The operating environment of this tutorial: Windows7 system, HTML5&&CSS3 version, Dell G3 computer.

Recommended: "css Video Tutorial"

In HTML code, sometimes you need to add an icon next to the text.

By default, the picture is aligned at the top and the text is aligned at the bottom. Therefore, the picture is usually high and the text is low, and cannot be horizontally aligned in the middle.

There are three common methods: 1. By adding "vertical-align:middle;" to CSS; 2. If the image is a background image, you can set the background image in CSS; 3. Separate the text and image into different divs. The above three methods can all display pictures and text on the same line. Let's use examples to apply them below.

1. Add the "vertical-align:middle" attribute

We use "Login" as an example in actual situations, make "Login" into a picture, and set "Retrieve Password" The written html code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <div >
        <img src="logo.jpg" alt=""   style="max-width:90%"><a href="">找回密码</a>
    </div>
</body>
</html>

Copy after login

Effect picture:

How to align words and images in css

2. Set the picture as the background picture

If our picture If it is a background image, you can use "background" in css to set the image. The html code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .haokan{
        width: 300px;
        height: 50px;
        line-height: 50px;
        background-color: red;
        background: url(logo.jpg) no-repeat left center;
        
    }
    .haokan a{
            display: block;
            margin-left: 116px;
        }
    </style>
</head>
<body>    
    <div>
        <a href="">找回密码</a>
    </div>
</body>
</html>

Copy after login

Rendering:

How to align words and images in css

3 , put the pictures and text into different divs respectively. The html code is as follows:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    .divs .imgs{
        display: inline-block;
        vertical-align: middle;
    }
    .divs .infos{
        display: inline-block;
    }
    </style>
</head>
<body>
    <div>
        <div><img src="logo.jpg" alt=""></div>
        <div><a href="">找回密码</a></div>
    </div>
</body>
</html>

Copy after login

Rendering:

How to align words and images in css

For more programming-related knowledge, please visit : Programming Teaching! !

The above is the detailed content of How to align words and images in css. For more information, please follow other related articles on the PHP Chinese website!