我通常不处理HTML,我认为这应该很简单,但似乎不是。我想要的只是一个图像,并在页面中间显示一些文字。我可以将图像和文本水平对齐到中间,但我不能垂直对齐。我终于找到了一个解决方案,我想知道为什么这有效,如果有更好的方法。
代码版本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>
虽然我读到的只是在我试过的桌子时才使用表格:
代码版本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>
代码版本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>
答案 0 :(得分:4)
以下是垂直和水平居中的好方法。
http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html
答案 1 :(得分:1)
设置图像的宽度并使用:
<img width:"900px" style="margin:0 auto">
它表示从顶部和底部开始的0边距和从两侧自动开始。
编辑:不要使用表格。用这个:
<div style="width:900px;margin:0 auto">
<img width:"900px">
your text
</div>
如果你想把整件事放在中间。
答案 2 :(得分:0)
第三个版本没有doctype声明,在大多数浏览器中都会触发“quirks mode”。这意味着他们不像“标准模式”那样严格遵守规范,这会导致您看到的行为。虽然它可能是你想要的,但它在技术上并不正确。
简而言之,没有标准方法在HTML / CSS中垂直居中。