使用 HTML 修复页面中间的图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15374057/
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
Fix an image in the middle of the page with HTML
提问by hol
I normally do not deal with HTML and I thought that should be pretty easy but seems that it is not. All I wanted was an image and some text displayed in the middle of the page. I can align the image and text to the middle horizontally but I cannot vertically. I finally found a solution and I wondered why this is working and if there is any better way.
我通常不处理 HTML，我认为这应该很容易，但似乎并非如此。我想要的只是一个图像和一些显示在页面中间的文本。我可以将图像和文本水平对齐到中间，但不能垂直对齐。我终于找到了一个解决方案，我想知道为什么这是有效的，是否有更好的方法。
Code Version 1 (not working):
代码版本 1（不工作）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<div style="width:100%; height:100%; text-align:center">
<img src="http://dummyimage.com/100x50/fc0/000000.png"
style="float:middle">
<br>
Hello World!
</div>
</body>
</html>
Although I read to only use tables when it is a table I tried:
虽然我读到只有当它是我尝试过的表格时才使用表格：
Code Version 2 (not working):
代码版本 2（不工作）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<table width="100%" border="0" height="100%" align="CENTER">
<tr><td align="CENTER">
<img src="http://dummyimage.com/100x50/fc0/000000.png"
style="float:middle">
<br>
Hello World!
</td></tr>
</table>
</body>
</html>
Code Version 3 (working, why?):
代码版本 3（有效，为什么？）：
<html>
<body>
<table width="100%" border="0" height="100%" align="CENTER">
<tr><td align="CENTER">
<img src="http://dummyimage.com/100x50/fc0/000000.png"
style="float:middle">
<br>
Hello World!
</td></tr>
</table>
</body>
</html>
回答by Brian
The following is a good approach to centre vertically and horizontally.
以下是垂直和水平居中的好方法。
http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html
http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html
回答by AliBZ
Set a width for your image and use:
为您的图像设置宽度并使用：
<img width:"900px" style="margin:0 auto">
it means 0 margin from top and bottom and auto from both sides.
这意味着顶部和底部的边距为 0，两侧的边距为 auto。
Edit: Don't use tables. just use this:
编辑：不要使用表格。只需使用这个：
<div style="width:900px;margin:0 auto">
<img width:"900px">
your text
</div>
if you want to put the whole thing in the middle.
如果你想把整个东西放在中间。
回答by Mark Parnell
The third version doesn't have a doctype declaration, which in most browsers triggers "quirks mode". This means that they don't follow the specs as closely as they do in "standards mode", which results in the behaviour you're seeing. While it may be what you're trying to get, it's not technically correct.
第三个版本没有 doctype 声明，这在大多数浏览器中会触发“怪癖模式”。这意味着它们不像在“标准模式”中那样严格遵循规范，这会导致您看到的行为。虽然这可能是您想要获得的，但在技术上并不正确。
In short, there is no standardway to centre something vertically in HTML/CSS.
简而言之，在 HTML/CSS 中没有垂直居中的标准方法。
