Html CSS标题对齐_Html_Css_Html Table

Html CSS标题对齐

html css

Html CSS标题对齐,html,css,html-table,Html,Css,Html Table,我只是不能让我的头球正确排列。使用下面的代码，我是最接近internet explorer的，但在Firefox中看起来很糟糕。我已经在每个论坛上尝试了我能读到的所有东西，我玩得越多，情况就越糟。我只希望header.png在整个页面上传播，这样就可以了。然后我想要一个以formtop.png为背景的居中标题，这样就可以了。现在，在标题中，我希望logo.png位于标题div的左下角，而我的焰火菜单表位于右下角。在IE中，除了菜单表本身和div的最底部之间有一些空间外，所有东西都排成一行。在Fi

我只是不能让我的头球正确排列。使用下面的代码，我是最接近internet explorer的，但在Firefox中看起来很糟糕。我已经在每个论坛上尝试了我能读到的所有东西，我玩得越多，情况就越糟。我只希望header.png在整个页面上传播，这样就可以了。然后我想要一个以formtop.png为背景的居中标题，这样就可以了。现在，在标题中，我希望logo.png位于标题div的左下角，而我的焰火菜单表位于右下角。在IE中，除了菜单表本身和div的最底部之间有一些空间外，所有东西都排成一行。在Firefox中，没有任何东西排成一行。我怀疑是因为绝对和相对设置。在Firefox中，我希望在header div中包含的所有内容都位于左上角。但玩绝对属性和相对属性会破坏IE中的一切。有人能帮我或给我指一个基本的教程，它展示了如何排列适用于大多数浏览器的头div吗

</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>

要在前箱中居中对齐，除了使用

文本对齐：居中之外，还应使用边距

比如：
 margin-left: auto;
 margin-right: auto;

更简洁的是：
margin: 0px auto;

不过，正如nmagerko所说，看到一个已发布的网站会非常有帮助。
你有一个我们可以查看的已发布网站吗？几乎在2012年。。。内联样式。。。痛苦在***。只要一点点style.css就可以给任何程序员带来灿烂的笑容。你真的应该清理标记。如果你用正确的方式编写HTML，CSS会容易得多。可能是因为我是新手，我似乎更容易内联调整，然后在样式表中添加所有内容。我会尽量不做内联的。现在一切都在本地主机上。如果我不能修复它，我会把它扔到网上寻求帮助。它还不完美，但你让我走上了正确的轨道。肯定是我要找的。谢谢我让所有东西都按我想要的方式水平排列，但是在firefox中，如何将div放到包含div的底部呢？我试过底部：0；边距底部：0，它在firefox中不会移动。这取决于你如何定位它。这可能有点棘手，就像在“粘性”页脚的情况下一样，但是有一些很好的教程（请参阅或获取一些帮助）。您试图将哪个div定位在其包含div的底部？附言：我喜欢这个页面的截图。看起来不错！第二个建议奏效了。非常感谢！真不敢相信这么简单的事竟这么复杂。不用担心。祝你好运和快乐！我希望这个项目能顺利进行。