Question

我通常不处理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>

Answer 1

以下是垂直和水平居中的好方法。

http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/demo.html

Answer 2

设置图像的宽度并使用：

<img width:"900px" style="margin:0 auto">

它表示从顶部和底部开始的0边距和从两侧自动开始。

编辑：不要使用表格。用这个：

<div style="width:900px;margin:0 auto">
<img width:"900px">
your text
</div>

如果你想把整件事放在中间。

Answer 3

第三个版本没有doctype声明，在大多数浏览器中都会触发“quirks mode”。这意味着他们不像“标准模式”那样严格遵守规范，这会导致您看到的行为。虽然它可能是你想要的，但它在技术上并不正确。

简而言之，没有标准方法在HTML / CSS中垂直居中。

使用HTML在页面中间修复图像

3 个答案: