0

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

3 回答 3

4

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

http://demo.tutorialzine.com/2010/03/centering-div-vertically-and-horizo​​ntally/demo.html

于 2013-03-12T23:23:22.897 回答
1

为您的图像设置宽度并使用：

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

这意味着顶部和底部的边距为 0，两侧的边距为自动。

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

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

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

于 2013-03-12T23:12:20.707 回答
0

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

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

于 2013-03-12T23:20:48.713 回答