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

Question

我有一个带有图像的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中，在＃34; internet＆＃34; S3上的浏览器，这个问题根本不存在。

Answer 1

尝试用此替换img src

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

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

Answer 2

#dlbutton在样式表上比#arrowbutton低吗？您可能有另一条规则更具体地覆盖#arrowbutton规则。使用Web开发人员工具检查元素，并查看正在应用于div和图像的样式选择器。

在图像上使用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>