Html 如何在所有屏幕尺寸的网页上居中图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5901789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to center images on a web page for all screen sizes
提问by connor.p
I'm having a problem with my HTML. I've searched all over the internet, but still no real answer.
我的 HTML 有问题。我已经在互联网上搜索了所有内容，但仍然没有真正的答案。
I have a website with some images, and I want them to be in the middle. Now, on my screen they're in the middle, but that's because I've put them there by moving them to one side. When my friends to look at it, the image is off-center.
我有一个包含一些图像的网站，我希望它们位于中间。现在，在我的屏幕上，它们位于中间，但那是因为我将它们移到一侧将它们放在那里。当我的朋友们看它时，图像是偏心的。
Here's the website; if you are on a 13.5" screen it will look to be in the middle.
这是网站; 如果您使用的是 13.5" 屏幕，它看起来会在中间。
回答by Thomas Shields
Try something like this...
尝试这样的事情......
<div id="wrapper" style="width:100%; text-align:center">
<img id="yourimage"/>
</div>
回答by Freesn?w
text-align:center
文本对齐：居中
Applying the text-align:centerstyle to an element containing elements will center those elements.
将text-align:center样式应用于包含元素的元素将使这些元素居中。
<div id="method-one" style="text-align:center">
CSS `text-align:center`
</div>
Thomas Shields mentions this method
margin:0 auto
保证金：0 自动
Applying the margin:0 autostyle to a block element will center it within the element it is in.
将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 tag
中心标签
My original answer was that you can use the <center></center>tag. To do this, just place the content you want centered between the tags. As of HTML4, this tag has been deprecated, though. <center>is still technically supported today (9 years later at the time of updating this), but I'd recommend the CSS alternatives I've included above.
我最初的回答是你可以使用<center></center>标签。为此，只需将您想要的内容放在标签之间居中即可。 不过，从 HTML4 开始，此标签已被弃用。 <center>今天仍然得到技术支持（9 年后更新时），但我推荐我在上面包含的 CSS 替代方案。
<h3>Method 3</h1>
<div id="method-three">
<center>Center tag (not recommended and deprecated in HTML4)</center>
</div>
You can see these three code samples in action in this jsfiddle.
您可以在此 jsfiddle 中看到这三个代码示例的运行情况。
I decided I should revise this answer as the previous one I gave was outdated. It was already deprecated when I suggested it as a solution and that's all the more reason to avoid it now 9 years later.
我决定我应该修改这个答案，因为我给出的前一个已经过时了。当我建议它作为解决方案时，它已经被弃用了，这也是 9 年后现在避免使用它的更多理由。
回答by David says reinstate Monica
In your specific case, you can set the containing aelement to be:
在您的特定情况下，您可以将包含a元素设置为：
a {
display: block;
text-align: center;
}
回答by user1468562
<div style='width:200px;margin:0 auto;> sometext or image tag</div>
this works horizontally
这水平工作
