集中图像以响应式网站

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

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

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

这里：

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

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; margin:0px auto; width:200px; 当然要替换图像宽度...