相同的 CSS 规则，不同的结果答案

【问题标题】：Same CSS rule, different results相同的 CSS 规则，不同的结果
【发布时间】：2014-03-21 03:48:59
【问题描述】：

我有一个 div，里面有一张图片。我正在尝试将其居中对齐，但它不起作用。我有另一个 CSS 规则正在对齐其他东西，所以我尝试应用它并且它有效！但是那些规则的内容是一样的。

这里是有问题的块：

<div id = "dlbutton">
    <a href="signup.html"><img src="img/arrow2.png"></a>
</div>

规则如下：

#dlbutton 
{
     font-size: 2em;
     text-align: center;
}

#arrowbutton
{
     font-size: 2em;
     text-align: center;
}

当我应用#arrowbutton 时，它是左对齐的，当我应用#dlbutton 时，它的中心对齐。此问题出现在 android chrome 中，在 S3 上的“互联网”浏览器上，此问题不存在。

【问题讨论】：

【解决方案1】：

尝试用这个替换 img src

<img style= class="align-center" src="img/arrow2.png"/>

您要求 css 做的是对齐 div 中没有的文本。

【讨论】：

【解决方案2】：

样式表上的#dlbutton 是否低于#arrowbutton？您可能有另一个更具体的规则覆盖#arrowbutton 规则。使用 Web 开发人员工具检查元素，看看哪些样式选择器应用于 div 和图像。

在图像上使用 text-align 并不总能产生预期的结果，因为不同的浏览器对图像和 text-align 的处理方式不同。可靠地居中图像的最佳方法可能是使用以下代码：

.imgcenter {
    display: block;
    margin: 0 auto; 
}

然后在您想要居中的任何图像上调用 imgcenter 类：

<img class="imgcenter" src="imagelocation/img.jpg" />

或者，如果您希望所有图像都是块级居中的图像，那么您可以在 CSS 规则中使用 img 而不是类：

IMG {
    display: block;
    margin: 0 auto;
}

您还可以通过添加<center> 标记来使用纯HTML 方法（不推荐）。

<div id = "dlbutton">
  <center>
    <a href="signup.html"><img src="img/arrow2.png"></a>
  </center>
</div>

【讨论】：