센터 상단 div

순수한 CSS 페이지에서 내 탐색을 중심에두고 있습니다. 나는 '모든 것을 중심으로'보일 것입니다.센터 상단 div

현재 3 개의 div가 나란히 있습니다. 이것이 최선의 경로입니까? 또는 1 div를 사용해야하고 센터를 조정해야합니까?

내가 어떻게 이것을 달성 할 수 있습니까? 도움을 주시면 감사하겠습니다. 여기

<!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 요소를 중심으로이 작업을 수행했습니다. –

센터 상단 div

답변

관련 문제