image - 为响应式网站居中图像

Question

因此，我正在为学校作业进行响应式设计，并且正在尝试将图像宽度居中。

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

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

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

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

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

提前致谢

Answer 1

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

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

这里：

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

http://jsfiddle.net/xMPZ4/

Answer 2

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

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

Answer 3

您可以将徽标类添加到图像并将 CSS 设置为：margin:0px auto; width:200px;当然替换图像宽度...