将图像置于页脚小部件中

Question

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

我的CSS

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

}

我的HTML

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

Answer 1

在图像类名称中为display。所以在css中更改你的类名。

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

Demo

Answer 2

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

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

其他一切都很好。如果没有宽度，边距'自动'属性不起作用。所以也许你可以在你的CSS代码上添加图像宽度。

Answer 3

在您的CSS中，您定义该课程为中心（而不是显示），因此在您的HTML中：

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