Div的是部分中心，但不能讓它動態中心

Question

http://cathybrooks.freeiz.com/

所以我有頁眉頁腳和內容容器都在一個容器中，我試圖讓裏面的東西它的中心位置，當調整窗口大小後，它會動態保持居中（包括將投影組合顯示框疊放）。我使用左/右屬性來定位導航和頁腳（主要問題），但這不是理想的，因爲它不是基於列表中的中間元素居中，而是由第一個元素定位列表。我怎麼能根據列表的長度去集中頁眉和頁腳而不是放置第一個元素？無論添加多少元素，這應該能夠工作。謝謝！

<div class = "container"> 

     <ul class = "nav"> 
      <li><a href = "#">PORTFOLIO</a></li> 
      <li><a href = "cv.html">CV</a></li> 
      <li><a href = "contact.html">CONTACT</a></li> 
     </ul> 

     <a id = "name" href = "index.html">CATHERINEROSEART</a> 

     <div id = "wrapper"> 

      <div id = "content"> 

       <div class = "portfoliowrapper"> 
        <div class = "left"> 
         <a href = "#"> 
          <div id = "box-1" class = "box"> 
           <img id = "image-1" src = "img/1.jpg"/> 
           <div class = "caption fade-caption"> 
            <h3>Piece 1</h3> 
            <p class = "captp">Piece 1</p> 
           </div> 
          </div> 
         </a> 
        </div> 
        <div class = "middle"> 
         <a href = "#"> 
          <div id = "box-2" class = "box"> 
           <img id = "image-2" src = "img/1.jpg"/> 
           <div class = "caption fade-caption"> 
            <h3>Piece 2</h3> 
            <p class = "captp">Piece 2</p> 
           </div> 
          </div> 
         </a> 
        </div> 
        <div class = "right"> 
         <a href = "#"> 
          <div id = "box-2" class = "box"> 
           <img id = "image-2" src = "img/1.jpg"/> 
           <div class = "caption fade-caption"> 
            <h3>Piece 2</h3> 
            <p class = "captp">Piece 2</p> 
           </div> 
          </div> 
         </a> 
        </div> 

       </div> 

      </div> 



      <div id = "footer"> 
       <ul class = "nav"> 
        <li><a href = "#">Facebook</a></li> 
        <li><a href = "https://twitter.com/cathychYEAH" target = "_blank">Twitter</a></li> 
        <li><a href = "https://plus.google.com/u/0/+CatherineBrooks/posts" target = "_blank">Google+</a></li> 
        <li><a href = "http://uk.linkedin.com/pub/catherine-rose-brooks/61/7/563" target = "_blank">LinkedIn</a></li> 
        <li><a href = "http://catherineroseart.bigcartel.com/" target = "_blank">BigCartel</a></li> 
       </ul> 
       <p>© Catherine Brooks 2013 </p> 
      </div> 

     </div> 

CSS：

.container { 
    width: 1000px; 
    margin: 0 auto; 
    position: relative; 
    top: 10%; 
    text-align: center; 
} 

/* nav style */ 

.nav { 
    margin: 0 auto; 
    position: fixed; 
    text-align: center; 
    left: 0; 
    right: 0; 
} 

.nav ul { 
    list-style: none; 
    width: 100%; 
    margin: 0 auto; 
    padding: 0; 
    display: inline; 
    text-align: center; 
    left: 0; 
    right: 0; 
} 

.nav li { 
    border-bottom: 1px solid #ccc; 
    list-style: none; 
    display: inline-block; 
    left: 0; 
    right: 0; 
} 

.nav a { 
    display: block; 
    padding: 15px 25px 10px 25px; 
    text-decoration: none; 
    font-size: 12px; 
    color: #C7C7C7; 
    text-align: center; 
    left: 0; 
    right: 0; 
} 

.nav li a:hover { 
    color: #A6A6A6; 
} 

/* end nav style */ 

/* content style */ 

#wrapper { 
    background: white; 
    color: black; 
    width: 100%; 
    float: left; 
    margin: 0 auto; 
    position: relative; 
    border: 0; 
    padding: 15px; 
    display: inline-block; 
    text-align: center; 
} 

.left, .middle, .right { 
    width: 31%; 
    margin: 0 auto; 
    padding: 10px; 
    display: inline-block; 
    text-align: center; 
    left: 0; 
    right: 0; 
    float: left; 
} 

#name { 
    font-family: 'Karla', sans-serif; 
    color: #333333; 
    display: block; 
    text-align: center; 
    padding-top: 20px; 
    padding-bottom: 10px; 
    font-size: 45px; 
    letter-spacing: 5px; 
    margin: 0 auto; 
    left: 0; 
    right: 0;  
} 

a, #name { 
    text-decoration: none; 
    color: #333333; 
} 

a:visited { 
    color: #333333; 
} 

#name { 
    left: 0; 
    right: 0; 
    display: inline-block; 
    vertical-align: middle; 
} 

#name:hover { 
    color: #636363; 
} 

/* folio style */ 

.portfoliowrapper { 
    font: 10pt normal Arial, sans-serif; 
    height: auto; 
    margin: 0 auto; 
    text-align: center; 
    width: 100%; 
    display: inline-block; 
    left: 0; 
    right: 0; 
} 

.portfoliowrapper .box { 
    border: 5px solid #fff; 
    cursor: pointer; 
    height: 250px; 
    left: 0; 
    right: 0; 
    margin: 5px; 
    position: relative; 
    overflow: hidden; 
    width: 250px; 
    -webkit-box-shadow: 1px 1px 1px 1px #ccc; 
    -moz-box-shadow: 1px 1px 1px 1px #ccc; 
    box-shadow: 1px 1px 1px 1px #ccc; 
    display: inline-block; 
} 

.portfoliowrapper .box img { 
    position: absolute; 
    left: 0; 
    -webkit-transition: all 300ms ease-out; 
    -moz-transition: all 300ms ease-out; 
    -o-transition: all 300ms ease-out; 
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out; 
} 

.portfoliowrapper .box .caption { 
    transition-delay: 0.5s; 
    background-color: rgba(0,0,0,0.8); 
    position: absolute; 
    color: #fff; 
    z-index: 100; 
    -webkit-transition: all 500ms ease-out; 
    -moz-transition: all 500ms ease-out; 
    -o-transition: all 500ms ease-out; 
    -ms-transition: all 500ms ease-out; 
    transition: all 500ms ease-out; 
    left: 0; 
} 

.portfoliowrapper .box .fade-caption, .portfoliowrapper .box .scale-caption { 
    opacity: 0; 
    width: 250px; 
    height: 250px; 
    text-align: left; 
    padding: 15px; 
} 

.portfoliowrapper .box:hover .fade-caption { 
    opacity: 1; 
}  

/* end folio style */ 

/* footer style */ 

#footer { 
    bottom: 0; 
    position: fixed; 
    clear: both; 
    left: 0; 
    right: 0; 
} 

#footer p { 
    text-align: center; 
    bottom: 0px; 
    color: #C7C7C7; 
    font-size: 8px; 
} 

#footer .nav { 
    bottom: 5%; 
} 

#footer .nav li a { 
    color: #333333; 
} 

#footer .nav li a:hover { 
    color: #A6A6A6; 
} 

Answer 1

的原因，你的元素是偏離中心的是因爲<ul>在默認情況下有一定的左填充（通常以騰出空間給子彈點）。

加.nav{padding:0}你應該都很好。

此外，請注意，您的.nav ul款式沒有做任何事情。爲了申請，選擇器應該是ul.nav，沒有空間。但在這種情況下，它們不是必需的，事實上會損害您的佈局。只要刪除該塊。

Answer 2

試圖把它清理乾淨一點：

HTML：

<div class = "header"> 
    <ul class = "nav"> 
     <li><a href = "#">PORTFOLIO</a></li> 
     <li><a href = "cv.html">CV</a></li> 
     <li><a href = "contact.html">CONTACT</a></li> 
    </ul> 
</div> 

CSS - 身體和NAV：

body{ 
    margin: 0; 
    padding: 0; 
} 

.container { 
    width: 100%; 
    margin: 0 auto; 
    position: relative; 
    padding: 0; 
    top: 10%; 
    text-align: center; 
} 

/* nav style */ 
.header{ 
    margin: 0 auto; 
    position: fixed; 
    width: 100%; 
    padding: 0; 
} 

.nav { 
    margin: 0 auto; 
    width: 100%; 
    padding: 0; 
} 

.nav ul { 
    list-style: none; 
    margin: 0 auto; 
    padding: 0; 
    width: 100%; 
} 

.nav li { 
    border-bottom: 1px solid #ccc; 
    padding: 15px 25px 10px 25px; 
    font-size: 12px; 
    list-style: none; 
    display: inline-block; 
    text-align: center; 
} 

.nav a { 
    text-decoration: none; 
    color: #C7C7C7; 
} 

.nav li a:hover { 
    color: #A6A6A6; 
} 

/* end nav style */ 

CSS - 包裝（沒有編輯個人相框etc）

#wrapper { 
    background: white; 
    color: black; 
    width: 100%; 
    margin: 0 auto; 
    display: inline-block; 
    text-align: center; 
} 
.left, .middle, .right { /*Why not just 1 class*/ 
    width: 31%; 
    margin: 0 auto; 
    padding: 10px; 
    display: inline-block; 
    text-align: center; 
} 

CSS - 頁腳

/* footer style */ 

#footer { 
    margin: 0 auto; 
    position: fixed; 
    width: 100%; 
    padding: 0; 
    bottom: 0; 
    clear: both; 
} 

#footer p { 
    padding: 5px; /*suggestion, since the copyright text changed from the original*/ 
    text-align: center; 
    color: #C7C7C7; 
    font-size: 8px; 
} 

#footer .nav li a { 
    color: #333333; 
} 

#footer .nav li a:hover { 
    color: #A6A6A6; 
}