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

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

 2016-02-25 12:38    网页设计   标签：css 代码   3451    3

今天在处理图片时突然发现，部分图片加入了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就正常显示了