css图片居中

最新推荐文章于 2024-05-02 14:20:00 发布

林代码er

最新推荐文章于 2024-05-02 14:20:00 发布

阅读量3.1k

点赞数 5

分类专栏： linercss 文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_71088505/article/details/128323155

版权

linercss 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

如何让图片居中？

1.直接在img标签上加text-align：center设置居中试试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        img{
            text-align: center;
        }
    </style>
</head>
<body>

        <img src="1.jpg" alt="">

</body>
</html>

效果显然是不好的。

2、试试margin：0 auto居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div>
    <img src="1.jpg" alt="">
</div>
</body>
</html>

显然效果也是不理想的。

正确做法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <img src="1.jpg" alt="">
</div>
</body>
</html>

总结：

margin: 0 auto; 设置的是模块在页面中的显示位置（div模块相对于页面居中）

text-align: center; 设置的是模块里面img元素的位置（div中的元素img相对于div盒子居中）

（div不设置宽度就会跟浏览器一样宽）

林代码er

关注

5
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
1
评论
css图片居中

设置的是模块里面img元素的位置（div中的元素img相对于div盒子居中）margin: 0 auto;设置的是模块在页面中的显示位置（div模块相对于页面居中）1.直接在img标签上加text-align：center设置居中试试。2、试试margin：0 auto居中。（div不设置宽度就会跟浏览器一样宽）显然效果也是不理想的。
复制链接

扫一扫