在页脚小部件中居中图像

Posted 2023-03-05

【中文标题】在页脚小部件中居中图像

【英文标题】：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代码上添加图像宽度。

【讨论】：

这很奏效！非常感谢.. 我也错过了 div 标签 :) 非常感谢你们花时间回答我的问题

@user3017090 ，您随时需要我们。我们是来帮助你的。 :)

【参考方案2】：

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

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

Demo

【参考方案3】：

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

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