CSS头对齐

我似乎无法让我的头正确排列。我用下面的代码可以在Internet Explorer中找到最接近的，但在Firefox中看起来很糟糕。我已经尝试了我在每个论坛上可以阅读的所有内容，而且我玩得越多，情况就越糟糕。我想要的只是header.png在整个页面上传播，并且工作正常。然后我想要一个以formtop.png为中心的头文件作为背景，并且工作正常。现在在标题中，我希望logo.png位于标题div的左下角，而我的烟花菜单表位于右下角。在IE中，除了菜单表格之外，它们之间都有一些空格，并且在div的最下面。在Firefox中根本没有排队。我怀疑是因为绝对和相对的设置。我在头文件div内想要的所有东西都在Firefox的左上角。但玩绝对和相对属性打击IE中的一切。有人可以帮助我或指出一个基本的教程，说明如何排列适用于大多数浏览器的标题div吗？提前致谢。CSS头对齐

</head> 
    <body style="text-align:center; margin:0; padding:0;"> 
    <div style="width:100%; height:100px; background-image:url(header.png);position:relative;"> 
     <div> 
     <div style="height:100%; width:100%; background-image:url(formtop.png); background-repeat:no-repeat; background-position:center; left:0; bottom:0; position: absolute;"> 
      <div style="width:920px; position:relative;"> 
      <div><img name="n12" src="logo.png" border="0" alt="" align="left"></div> 
      <div style="padding-top:10px; float:right; padding-right:30px; position:absolute; bottom:0;"> 
       <table style="display: inline-table;" border="0" cellpadding="0" cellspacing="0" width="400"> 
       <!-- fwtable fwsrc="Untitled" fwpage="Page 1" fwbase="navbar.png" fwstyle="Dreamweaver" fwdocid = "1979268284" fwnested="0" --> 
       <tr> 
        <td><img src="images/NavBar/spacer.gif" width="124" height="1" border="0" alt="" /></td> 
        <td><img src="images/NavBar/spacer.gif" width="139" height="1" border="0" alt="" /></td> 
        <td><img src="images/NavBar/spacer.gif" width="137" height="1" border="0" alt="" /></td> 
        <td><img src="images/NavBar/spacer.gif" width="1" height="1" border="0" alt="" /></td> 
       </tr> 
       <tr> 
        <td><img name="navbar_r1_c1_s1" src="images/NavBar/navbar_r1_c1_s1.png" width="124" height="50" border="0" id="navbar_r1_c1_s1" alt="" /></td> 
        <td><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('navbar_r1_c2_s1','','images/NavBar/navbar_r1_c2_s2.png',1);"><img name="navbar_r1_c2_s1" src="images/NavBar/navbar_r1_c2_s1.png" width="139" height="50" border="0" id="navbar_r1_c2_s1" alt="" /></a></td> 
        <td><a href="javascript:;" onMouseOut="MM_swapImgRestore();" onMouseOver="MM_swapImage('navbar_r1_c3_s1','','images/NavBar/navbar_r1_c3_s3.png',1);"><img name="navbar_r1_c3_s1" src="images/NavBar/navbar_r1_c3_s1.png" width="137" height="50" border="0" id="navbar_r1_c3_s1" alt="" /></a></td> 
        <td><img src="images/NavBar/spacer.gif" width="1" height="50" border="0" alt="" /></td> 
       </tr> 
       </table> 
      </div> 
      <br/> 
      </div> 
     </div> 
     </div> 
    </div> 
    </div> 
    <div>

来源

2011-12-26 Dev Newb

你碰巧有一个发布的网站，我们可以看看？ – nmagerko 2011-12-26 18:21:46

差不多在2012年...内联风格... ***中的痛苦。只需要一点style.css就可以在任何程序员的脸上带来宽阔的笑容 – 2011-12-26 18:24:10

你真的应该清理标记。如果您以正确的方式编写HTML，CSS将会更容易。 – 2011-12-26 18:35:21

更简洁：

margin: 0px auto;

这将是非常有益的正如nmagerko所说，看到一个已发布的网站。

来源

2011-12-26 18:41:06 tnbeatty

它还不完美，但你有正确的轨道。绝对是我在寻找的。谢谢！我所有的东西都按照我想要的方式水平排列，但是在firefox中，我怎样才能得到一个div到包含div的底部？我试过了底部：0; margin-bottom：0，它只是不会在Firefox中移动。 – 2011-12-26 18:54:47

取决于你如何定位。它可能有点棘手，就像在“粘”页脚的情况下，但有一些很好的教程（见http://www.cssstickyfooter.com/或http://ryanfait.com/resources/footer-坚持页面底部/一些帮助）。你想要在包含div的底部放置哪个div？ PS：喜欢页面的屏幕截图。看起来不错！ – tnbeatty 2011-12-26 19:16:08

第二个建议做到了。非常感谢！简直不能相信这么简单的事情太复杂了。 – 2011-12-26 21:42:13

要居中除了对准在forefox使用margin到text-align: center

喜欢的东西：

margin-left: auto; 
margin-right: auto;

来源

2011-12-26 18:25:16

回答

相关问题