解决text-align: center;不居中的问题

 2016-02-25 12:38

今天在处理图片时突然发现,部分图片加入了class="text-align: center;"的命令却无法让图片居中显示居中,这让我很费解。因为这条命令是老的CSS命令,用来居中文字的,当图片或其他div架构使用时,它应该也可以发挥正常的作用。

百度了下,有是说是要加clear:both命令的,也有的用margin:auto命令的,可我试验了下都没有效果。我开始怀疑我的部分代码出现冲突导致了图片的无法居中。

开始一一删减,关闭第一个display: block就恢复正常了,我纳闷了,仔细看了下这个代码的意义。它指的是让图片显示为一个块装模式,单独占据一行。

我想了想,感觉有可能是两段代码同时定义出现优先级问题导致了这一图片不居中的问题。

文章中插入的代码是:

<p style="text-align: center;">
    <img src="..." alt="...">
</p>

开始对应的代码是:

p img {
    display: block;
    max-width: 100%;
    height: auto;
}

后来删除了display: block就正常显示了

作者头像

作者:紫铜炉

自由博主,网页设计师。我关注科技产品和个人博客发展,注重用户体验和界面优化。

 发表评论:

 评论列表

个人博客 2016-02-25  17:42

感谢分享

橙色阳光 2016-02-25  13:16

瞎几把搞,text-align:center是居中文本用的,所以如果图片要通过这个居中,那么就要把图片设为行内块级元素,即 display:inline-block; img标签的display默认属性就是inline-block

蟹胖 2016-02-25  14:16

谁叫zblogPHP默认的图片加一个段落P的,还在P上加的文本居中的text-align:center,这就是变成没法居中了!