在页脚小部件中居中图像答案

【问题标题】：centre an image in a footer widget在页脚小部件中居中图像
【发布时间】：2013-12-05 18:55:52
【问题描述】：

我正在尝试将位于页脚小部件中的图像居中。我已经阅读了这里提供的几个解决方案，但我不确定我是否正确设置了代码

我的 CSS

#footer img.center {
display: block;
margin-left: auto;
margin-right: auto;

}

我的 HTML

<img class="display" src="....">

【问题讨论】：

【解决方案1】：

您必须在您的 html 代码中添加“中心”类：

<div id="footer">
   <img class="display center" src="....">
</div>

其他一切都很好。并且边距“自动”属性在没有宽度的情况下不起作用。所以也许你可以在你的css代码上添加图像宽度。

【讨论】：

【解决方案2】：

在图像类名称是 display 。所以在css中改变你的类名。

#footer img.display {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
}

【讨论】：

【解决方案3】：

在您的 CSS 中，您定义了该类是 center（而不是 display），所以在您的 HTML 中：

<div id="footer">
   <img class="center" src="....">
</div>

【讨论】：