HTML设置文字和图片居中

2022年6月10日 6次阅读 来源: 轻易搜

1.当图片和文字在同一行的情况

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css"> div{ width: 300px; height: 60px; border:1px solid red ; /*line-height: 60px;*/ } </style>
    </head>
    <body>
        <div>
            <img src="img03/verycode.gif"/>
            <span>啊啊啊啊啊啊</span>
        </div>
    </body>
</html>

效果如图所示：
文字是默认在图片的右下角对齐（就算使用对div设置居中也是这样，只能设置图片最底下哪行对div居中）
《HTML设置文字和图片居中》

2.使用vertical-align：middle属性使图片和文字居中，同使用line-height等于div的height值，使文字垂直居中。

            div{ width: 300px; height: 60px; border:1px solid red ; line-height: 60px; }   
            div img{ vertical-align: middle; }

效果如图所示：文字和图片都居中
《HTML设置文字和图片居中》

    原文作者：轻易搜
    原文地址: https://blog.csdn.net/qingyisuo/article/details/78962837
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞