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

回答

相關問題