如何使用text-align:center和 margin:0 auto 让img标签居中

柯cute

已于 2022-04-14 19:40:35 修改

阅读量1.7k

点赞数 6

分类专栏：经验分享文章标签：经验分享

于 2022-04-14 18:26:50 首次发布

本文链接：https://blog.csdn.net/weixin_45999422/article/details/124173543

版权

经验分享专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目场景：

项目场景：示例:通过text-align:center或者margin:0 auto让图片居中。

问题描述一

使用margin:0 auto 让图片居中，发现不生效。

原因分析：

img 标签不但是一个行内元素，还是一个可替换元素，所以img 标签就是一个可以设置宽高的行内元素。
而margin:0 auto生效的条件是：
·该元素是一个块级元素
·元素具有宽度
因此，少了display: block; 无法实现居中！

解决方案：

加上display: block;
正确代码：

<style>
        img {
            //不用刻意添加 width 是因为 img 标签是可替换元素有内置的宽度
            display: block;   //将行内元素转为块级元素
            margin: 0 auto;
        }
</style>

问题描述二

使用text-align：center让图片居中，发现不生效。

原因分析：

text-align:center；不同于html中的

属性，是将所有被包含的元素都居中显示，而 text-align：center 只是将 元素下面的内联元素 居中显示。

解决方案：

对img标签设置一个div标签。
正确代码：

<style>
/* 定义一个类标签 */
        .center{
            text-align: center;
        }
</style>

<body>
<div class="center"> 
    <img  src="./images/pic.jpeg" >
   </div>
</body>