HTML设置文字和图片居中

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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞