css图片如何实现垂直?css图片垂直对齐方法


本文摘自PHP中文网,作者云罗郡主,侵删。

本篇文章给大家带来的内容是关于css图片如何实现垂直?css图片垂直对齐方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

vertical-align属性

我们使用text-align属性来定义图片水平对齐方式。

大家就开始有疑问了,图片水平对齐我们实现了,那如果想对图片进行垂直对齐呢?

在CSS中,我们可以使用vertical-align属性来定义图片的垂直对齐方式。

语法:vertical-align:属性值;

vertical-align还有sub、super等一些属性值,对于这些我们不需要去理会,因为在实际开发中压根儿用不上。我们只需要使用以上这4个属性值就完全足够了。

举例1:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!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="http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>php中文网(<strong>top</strong>)

    <hr/>

    php中文网<img id="img_2" src="http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>php中文网(<strong>middle</strong>)

    <hr/>

    php中文网<img id="img_3" src="http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>php中文网(<strong>bottom</strong>)

    <hr/>

    php中文网<img id="img_4" src="http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/003/5a9675a3b2106284.jpg" alt=""/>php中文网(<strong>baseline</strong>)

</body>

</html>

效果如下:

微信截图_20181112155823.png

大家仔细观察一下,“vertical-align:baseline”和“vertical-align:bottom”是有区别的。

阅读剩余部分

相关阅读 >>

css图片如何实现垂直?css图片垂直对齐方法

更多相关阅读请进入《css图片》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...