HTML设置文字和图片居中

最新推荐文章于 2024-04-25 13:27:51 发布

轻易搜

最新推荐文章于 2024-04-25 13:27:51 发布

阅读量2.5w

点赞数 14

分类专栏：个人HTML笔记文章标签： html 标签文字和图片居中 vertical

本文链接：https://blog.csdn.net/qingyisuo/article/details/78962837

版权

个人HTML笔记专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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居中）
这里写图片描述

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;
            }

效果如图所示：文字和图片都居中
这里写图片描述

轻易搜

关注

14
点赞
踩
46

收藏

觉得还不错? 一键收藏
2
评论
HTML设置文字和图片居中

1.当图片和文字在同一行的情况<html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ width: 300px; height: 60px;
复制链接

扫一扫