center upper div

我正在尝试将我的导航置于纯CSS页面中。我要为'一切为中心'的样子。center upper div

目前，我有3格并排。这是最好的路线吗？或者我应该使用1格并尝试居中？

我该如何做到这一点？帮助将不胜感激！

这里是我的网页：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html><head> 
    <!-- <meta name="viewport" content="width=device-width; initial-scale=1.0"> --> 
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"> 
    <link rel="stylesheet" type="text/css" href="style3.css" /> 
    <script type="text/javascript" src="jquery-1.7.2.js"></script> 
    <script src="navigation.js"></script> 
    </head><body> 


<div id="top"> 



<header> 
    <div id="topLeft"></div> 
    <nav id="nav-wrap"> 

    <ul id="nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Attendees</a><ul><li><a href="#">Sub Menu</a></li><li><a href="#">Sub Menu</a></li><li><a href="#">Sub Menu</a></li><li><a href="#">Sub Menu</a></li></ul></li> 
     <li><a href="#">Exhibitors</a></li> 
     <li><a href="#">Speakers</a></li> 
     <li><a href="#">Program</a></li> 

    </ul> 

</nav> 
<div id="topRight">topright</div> 
</header> 

</div> 

<div id="middle"> 
<div id="headerLeft"></div> 
<div id="headerimage"> 
    <img src="header-2013.jpg"/> 
    </div> 

<div id="headerRight"></div>  
    <br style="clear: left;" /> 

</div> 

<div id="pagewrap"> 











<div id="content"> 
      <!-- <h3>To see the mobile navigation, narrow your browser window or check with a mobile device.</h3> 
     <p>Unholy is a new, upcoming raiding guild with goals of 
successfully accomplishing Player versus Environment and Player versus Player 
raiding content. If thou art seeking such guild then thou would consider joining 
us on our quest to victory over the evils that lurk within the depths of 
Karazhan and Zul'Aman. All are welcome that have experienced the foul beasts 
that roam abroad the forsaken ground in the Outlands and whish to further 
explore and cleanse such places. If this should be thy calling then we welcome 
you to our quest for victory, For the Horde </p> --> 
     </div> 






</div> 

<footer> 
<div id="footer"> 
footer 
</div> 
</footer> 
</body></html>

这里是我的CSS：

/************************************************************************************ 
GENERAL 
*************************************************************************************/ 
html { 
    height: auto; 
} 

body { 
    font: .9em/150% Arial, Helvetica, sans-serif; 
    color: #666; 
    overflow-x: hidden; 
    /******extra Mike Clayton **/ 
    margin: 0; 
    padding: 0; 
    height: 100%; 
} 

a { 
    text-decoration: none; 
    color: #39C; 
} 

h1,h2 { 
    line-height: 120%; 
    margin: 0 0 10px; 
    color: #000; 
} 

header { 
    content: " "; 
    display: table; 
} 

/************************************************************************************ 
STRUCTURE 
*************************************************************************************/ 
#pagewrap { 
    width: 100%; 
    max-width: 650px; 
    margin: 0px auto; 
    /**Mike Clayton**/ 
    min-height: 100%; 
    height: 100%; 
} 

#content { 
    clear: both; 
    border-top: solid 1px #ccc; 
    padding-top: 20px; 
    margin: 20px 0; 
    width: 100%; 
    /**Mike clayton**/ 
    margin-right:5px; 
    margin-left:5px; 

    padding-bottom:300px; 
} 

#top { 
    width: 100%; 
    background-color: #002664; 
    clear: both; 
} 

#topLeft { 
    float: left; 
    background-color: #002664; 
    width: 20%; 
    margin: 0; 
    margin-left:200px; 
} 

#topRight { 
    float: left; 
    background-color: #002664; 
    width: 20%; 
    margin: 0; 
} 

#middle { 
    width: 100%; 
    background-color: #AD1B30; 
    overflow: hidden; 
} 

#headerLeft { 
    float: left; 
    background-color: #AD1B30; 
    width: 20%; 
    margin: 0; 
} 

#headerimage { 
    width: 650px; 
    align: center; 
    margin: 0 auto; 
} 

#headerimage img { 
    width: 100%; 
} 

#headerRight { 
    float: left; 
    background-color: #AD1B30; 
    width: 20%; 
    margin: 0; 
} 

#footer { 
    clear: both; 
    position: absolute; 
    z-index: 10; 
    height: 3em; 
    bottom: 0; 
    background-color: #002664; 
    width: 100%; 
} 
/************************************************************************************ 
NAV 
*************************************************************************************/ 
#nav-wrap { 
    margin-top: 20px; 


} 

/* menu icon */ 
#menu-icon { 
    display: none; /* hide menu icon initially */ 
} 

#nav,#nav li { 
    margin: 0; 
    padding: 0; 
} 

#nav li { 
    list-style: none; 
    float: left; 
    margin-right: 5px; 
} 

/* nav link */ 
#nav a { 
    padding: 4px 15px; 
    display: block; 
    color: #000; 
    background: #ecebeb; 
} 

#nav a:hover { 
    background: #f8f8f8; 
} 

/* nav dropdown */ 
#nav ul { 
    background: #fff; 
    padding: 2px; 
    position: absolute; 
    border: solid 1px #ccc; 
    display: none; /* hide dropdown */ 
    width: 200px; 
} 

#nav ul li { 
    float: none; 
    margin: 0; 
    padding: 0; 
} 

#nav li:hover>ul { 
    display: block; /* show dropdown on hover */ 
} 

/************************************************************************************ 
MOBILE 
*************************************************************************************/ 
@media screen and (max-width: 600px) { /* nav-wrap */ 
    #nav-wrap { 
     position: relative; 
    } 

    /* menu icon */ 
    #menu-icon { 
     color: #000; 
     width: 42px; 
     height: 30px; 
     background: #ecebeb url(menu-icon.png) no-repeat 10px center; 
     padding: 8px 10px 0 42px; 
     cursor: pointer; 
     border: solid 1px #666; 
     display: block; /* show menu icon */ 
    } 
    #menu-icon:hover { 
     background-color: #f8f8f8; 
    } 
    #menu-icon.active { 
     background-color: #bbb; 
    } 

    /* main nav */ 
    #nav { 
     clear: both; 
     position: absolute; 
     top: 38px; 
     width: 160px; 
     z-index: 10000; 
     padding: 5px; 
     background: #f8f8f8; 
     border: solid 1px #999; 
     display: none; /* visibility will be toggled with jquery */ 
    } 
    #nav li { 
     clear: both; 
     float: none; 
     margin: 5px 0 5px 10px; 
    } 
    #nav a,#nav ul a { 
     font: inherit; 
     background: none; 
     display: inline; 
     padding: 0; 
     color: #666; 
     border: none; 
    } 
    #nav a:hover,#nav ul a:hover { 
     background: none; 
     color: #000; 
    } 

    /* dropdown */ 
    #nav ul { 
     width: auto; 
     position: static; 
     display: block; 
     border: none; 
     background: inherit; 
    } 
    #nav ul li { 
     margin: 3px 0 3px 15px; 
    } 
    #headerimage { 
     display: none; 
    } 

    /**Mike Clayton**/ 
    #footer { 
     clear: both; 
     position: relative; 
     z-index: 10; 
     height: 3em; 
     bottom: 0; 
     background-color: #002664; 
     width: 100%; 
    } 
} 

@media screen and (min-width: 600px) { 
    /* ensure #nav is visible on desktop version */ 
    #nav { 
     display: block !important; 
    } 
}

来源

2012-08-22 Michael Clayton

尝试添加以下内容到navwrap：

#nav-wrap { 
position: relative; 
margin-top: 20px; 
left: 100%; 
}

您还可以使用像素值，而不是百分比。

祝你好运！

来源

2012-08-22 21:01:55 patrickdamery

这肯定有助于集中它，但有一个问题。当我重新调整浏览器的大小时，所有内容都会正确移动/重新调整大小，但导航保持不变。当浏览器重新调整大小时，我希望中间的所有内容一起移动。 –

当窗口重新调整大小时，我能够居中集中，并居中。我通过集中

html 5元素来做到这一点。 –

回答

相关问题