中心2个浮动元素

问题描述

我有一个相对简单的HTML布局，其中有一个标题div，然后在下面是一个Main div，它的左侧包含一个NavBar，右侧包含一个ContentDiv。我的问题是我无法使NavBar和ContentDiv始终水平地显示在中央（水平），它们始终位于左侧（因此NavBars x位置为零）。您知道为什么他们（NavBar和ContentDiv）坐在左侧而不居中吗？

<!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\"><!-- InstanceBegin template=\"/Templates/homepage.dwt\" codeOutsideHTMLIsLocked=\"false\" -->
<head>
    <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />

    <title>Kamalei - Home Page</title>
    <style type=\"text/css\">
    <!--
        html,body,div,form,fieldset,legend,label,img {  margin: 0;  padding: 0;  }  table {  border-collapse: collapse;  border-spacing: 0; }  th,td {  text-align: left;  }  h1,h2,h3,h4,h5,h6,th,td,caption { font-weight:normal; }  img { border: 0; } 

        body { text-align: center; }

        #backgroundImg  { z-index: -1; position: absolute; left: 0px; top: 0px; }

        #heading        { height: 300px; }
        #main           { display: inline; }
        #navBar         { height: 700px; }
        #content        { height: 700px; }

        /* The above code displays the navbar above the content div but both
           elements are centred
        */

        /* The below code gets the navbar to be displayed to the left of the 
           content div which is what I want but now the 2 elements are not centred 
           they are on the left of the screen

           How do I get them centred?
        */

        #navBar         { float: left; height: 700px; }
        #content        { float: left; height: 700px; }
    -->
    </style>

</head>

<body>

    <div id=\"heading\"> 
        abc
    </div>

    <div id=\"main\">
        <div id=\"navBar\">
            <!-- This is the background image for this element,I know,I know I shd use CSS but it doesn\'t resize the images that way -->
            <img src=\"images/navBackground.png\" alt=\"\" width=\"200px\" height=\"700px\"/>
        </div>

        <div id=\"content\">
            <!-- This is the background image for this element -->
            <img src=\"images/contentBackground.png\" alt=\"\" width=\"800px\" height=\"700px\"/>
        </div>
    </div>


    <!-- Must keep the background image at the bottom of body -->
    <img id=\"backgroundImg\" src=\"images/background.png\" alt=\"\" width=\"javascript:getScreenSize()[\'width\']+px\" height=\"1000px\"/>

</body>

</html>

解决方法

尝试这个：

#navBar         { display: inline; height: 700px; }
#content        { display: inline; height: 700px; }
#main           { margin: 0 auto; }

编辑：更新的代码。我不确定这是否是您要找的东西。 , 最后两个CSS语句说：float：左。那就是为什么他们在左边=）编辑：啊，好吧...。我能看到正确的内容：您想在内容的左侧导航，但是两者都应该居中？

2个中心中心元素元素浮动

中心2个浮动元素

问题描述

解决方法

相关问答