How to make CSS images vertical? css image vertical alignment method-CSS Tutorial-php.cn

How to make CSS images vertical? css image vertical alignment method

云罗郡主

Release： 2018-11-12 16:05:37

forward

2645 people have browsed it

The content of this article is about how to achieve verticality in css images? The CSS image vertical alignment method has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

vertical-align attribute

We use the text-align attribute to define the horizontal alignment of the image.

Everyone started to have questions. We have achieved horizontal alignment of pictures, but what if we want to vertically align pictures?

In CSS, we can use the vertical-align attribute to define the vertical alignment of images.

Syntax: vertical-align: attribute value;

vertical-align also has some attribute values such as sub and super. We don’t need to pay attention to these because they are not used at all in actual development. Not on. We only need to use the above four attribute values and it is completely sufficient.

Example 1:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>vertical-align属性</title>
    <style type="text/css">
        img{width:80px;height:80px;}
        #img_1{vertical-align:top;}
        #img_2{vertical-align:middle;}
        #img_3{vertical-align:bottom;}
        #img_4{vertical-align:baseline;}
    </style>
</head>
<body>
    php中文网<img id="img_1" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>php中文网（<strong>top</strong>）
    <hr/>
    php中文网<img id="img_2" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>php中文网（<strong>middle</strong>）
    <hr/>
    php中文网<img id="img_3" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>php中文网（<strong>bottom</strong>）
    <hr/>
    php中文网<img id="img_4" src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>php中文网（<strong>baseline</strong>）
</body>
</html>

Copy after login

The effect is as follows:

How to make CSS images vertical? css image vertical alignment method

Look carefully, "vertical-align:baseline" and "vertical-align:bottom" makes a difference.

Example 2:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>vertical-align属性</title>
    <style type="text/css">
        div
        {
            width:100px;
            height:80px;
            border:1px solid gray;
        }
        .div_img1{vertical-align:top;}
        .div_img2{vertical-align:middle;}
        .div_img3{vertical-align:bottom;}
        img{width:60px;height:60px;}
    </style>
</head>
<body>
    <div class="div_img1">
        <img src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>
    </div>
    <div class="div_img2">
        <img src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>
    </div>
    <div class="div_img3">
        <img src="https://img.php.cn/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>
    </div>
</body>
</html>

Copy after login

The effect is as follows:

How to make CSS images vertical? css image vertical alignment method

Eh? ! what happened? Why are the images not vertically aligned as expected? Ah, actually everyone has misunderstood the vertical-align attribute. The definition of the vertical-align attribute is: the vertical-align attribute defines the vertical alignment of an inline element relative to the element. [Recommended reading: What are block-level elements and inline block elements? 】

The above is how to achieve verticality for css images? A complete introduction to the vertical alignment method of CSS images. If you want to know more about CSS tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to make CSS images vertical? css image vertical alignment method. For more information, please follow other related articles on the PHP Chinese website!