为响应式网站居中图像答案

【问题标题】：Centering an image for responsive website为响应式网站居中图像
【发布时间】：2014-02-01 15:05:26
【问题描述】：

所以我正在为学校作业制作响应式设计，并且我正在尝试将图像宽度居中。

我在 Photoshop 中缩放了图像，所以我不必为图像设置任何宽度或高度

这是我现在得到的，但这不起作用

<header> <img src="afb%20/logo3.png" alt="logo3" width="" height="" /> </header>

header{ width: 100%; margin-left: auto; margin-right: auto; }

有人可以帮帮我吗？真的需要这个！

提前致谢

【问题讨论】：

【解决方案1】：

只需在标题 CSS 中设置 text-align: center。

您目前正在将页眉设为 100% 宽度，因此您的边距将不适用。此外，由于您的容器是 100% 宽并且没有文本对齐，因此 img 将始终在左侧对齐。

这里：

header { width: 100%; text-align: center; }

【讨论】：

【解决方案2】：

.center{margin: 0px auto; display: block;}

<header><img src="updates_button.jpg" alt="logo3" class="center"></header>

【讨论】：

【解决方案3】：

你可以为图片添加一个 logo 类并将 CSS 设置为：margin:0px auto; width:200px; 当然替换图片宽度...

【讨论】：