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

Posted 2023-03-05

【中文标题】如何在所有屏幕尺寸的网页上居中图像

【英文标题】：How to center images on a web page for all screen sizes

【发布时间】：2011-08-19 14:18:52

【问题描述】：

我的 html 有问题。我已经在互联网上搜索了所有内容，但仍然没有真正的答案。

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

Here's the website;如果您在 13.5 英寸的屏幕上，它看起来会在中间。

【问题讨论】：

投票转向网站管理员 stackexchange 网站，因为它更适合这个问题

bdonlan 投票支持移动您的问题；你不需要去找网站管理员，除非问题真的被移动了。问题将自动重定向。 @bdonlan 这是一个特定的 CSS 问题，而不是网站管理员问题。它应该留在这里。

@bdonlan - 这绝对是不是一个网站管理员的问题。 HTML 和 CSS 问题属于 SO。

我求求你：请不要使用<center>。 CSS 有一个standardized way to do this since 1996，并且在大多数时间里浏览器支持一直很稳固。为什么要以你大半辈子已经过时的方式来做？

【参考方案1】：

试试这样的...

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

【讨论】：

@connor.p np。不要忘记将最有帮助的帖子标记为答案。

+1 表示通用示例，而且，平心而论，我使用几乎相同的解决方案（除了我依赖display: block; 的默认行为）。 @connor.p，正如 Thomas 所说，请接受最有帮助的答案（如果您的问题已解决），如果您觉得其他答案有帮助，请考虑对这些答案进行投票... :)

【参考方案2】：

文本对齐：居中

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

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

Thomas Shields mentions this method

---

---

边距：0 自动

将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 mentions this method

---

中心标签

我最初的回答是你可以使用<center></center> 标签。为此，只需将您想要的内容放在标签之间居中即可。 As of HTML4, this tag has been deprecated，不过。 <center> 今天仍然得到技术支持（9 年后更新此内容），但我会推荐上面包含的 CSS 替代方案。

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

---

您可以在in this jsfiddle 看到这三个代码示例。

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

【讨论】：

当然 <center> 有效，但它不是有效的 HTML5 - 随着浏览器摆脱旧的、不推荐使用的标签，这将成为一个问题。

哦，没问题 :) 请小心，预计 6 年后它可能不再起作用;)

@DalexL HTML 不是一种语言，它是一种标记。而且 CSS 不是 HTML 的第三方，它们都是由 W3C 开发和维护的。他们齐头并进。

@Thomas 请注意写在“语言”一词之后的（标记）。然而，它是一种语言，而不是编程或脚本。 CSS 不是 HTML，HTML 不是 CSS。无论谁维护它们，它们都不相同。产品本身应该是功能齐全的，它们不应该强迫客户同时使用两者。如果是这样，为什么不将它们合并为一个呢？问题已经回答了，没必要发起火焰战争之类的事情了。

@DalexL aak 对不起，我错过了“标记”——我不是想打架。我只是指出 CSS 不再是 HTML 的“第三方”，就像 Paint 是 Windows 的第三方一样，这就是为什么有一个 HTML 样式标签仅用于实现 CSS。这就是为什么他们不赞成使用标记来使用标记并不完全奇怪，你知道吗？

【参考方案3】：

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

a 
    display: block;
    text-align: center;

JS Bin demo.

【参考方案4】：

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

这是横向工作