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元素來做到這一點。 –

回答

相關問題