如何针对所有屏幕尺寸将网页上的图像居中

Question

我的 HTML 有问题。我在互联网上进行了搜索，但仍然没有真正的答案。

我有一个包含一些图像的网站，我希望它们位于中间。现在，在我的屏幕上，它们位于中间，但那是因为我通过将它们移动到一侧来将它们放置在那里。当我的朋友们看它时，图像偏离了中心。

这是网站；如果您使用的是 13.5 英寸屏幕，它看起来会位于中间。

Answer 1

尝试这样的事情......

<div id="wrapper" style="width:100%; text-align:center">
<img id="yourimage"/>
</div>

Answer 2

text-align:center

将 text-align:center 样式应用于包含元素的元素将使这些元素居中。

<div id="method-one" style="text-align:center">
  CSS `text-align:center`
</div>

Thomas Shields 提到了这个方法

---

---

margin:0 auto

将 margin:0 auto 样式应用于块元素会将其置于其所在元素的中心。

<div id="method-two" style="background-color:green">
  <div style="margin:0 auto;width:50%;background-color:lightblue">
    CSS `margin:0 auto` to have left and right margin set to center a block element within another element.
  </div>
</div>

user1468562 提到了这一点method

---

Center 标签

我原来的答案是可以使用

标签。为此，只需将所需的内容放在标签之间的中心即可。 从 HTML4 开始，此标记已被弃用，尽管。 今天仍然受到技术支持（9 年后更新此内容），但我建议使用上面包含的 CSS 替代方案。

<h3>Method 3</h1>
<div id="method-three">
  <center>Center tag (not recommended and deprecated in HTML4)</center>
</div>

---

您可以在此 jsfiddle 中查看这三个代码示例的实际效果。

我决定应该修改这个答案，因为我之前给出的答案已经过时了。当我建议它作为解决方案时，它已经被弃用了，这就是 9 年后现在避免使用它的更多理由。

Answer 3

在您的具体情况下，您可以将包含的 a 元素设置为：

a {
    display: block;
    text-align: center;
}

JS Bin demo。

Answer 4

<div style='width:200px;margin:0 auto;> sometext or image tag</div>

这是水平工作的