css垂直和水平對齊問題

Question

我想在紅色DIV中水平和垂直對齊我的菜單項和標誌圖片。我怎麼能做到這一點？我試着將左右邊距設置爲自動，並將垂直對齊設置爲居中，但這不起作用。感謝您的幫助

參見：http://jsfiddle.net/gm2wzL6z/

HTML：

<div id="nav-container"> 
    <nav> 
     <ul id="navlist"> 
      <li id="active"><a href="#" id="current">Item one</a> 
      </li> 
      <li><a href="#">Item two</a> 
      </li> 
      <li><a href="#">Item three</a> 
      </li> 
      <li> 
       <img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg"> 
      </li> 
      <li><a href="#">Item four</a> 
      </li> 
      <li><a href="#">Item five</a> 
      </li> 
     </ul> 
    </nav> 
</div> 

CSS：

#nav-container { 
    height: 300px; 
    background: red; 
} 
#navlist li { 
    display: inline; 
    list-style-type: none; 
    padding-right: 20px; 
} 

Answer 1

使用display:table/table-cell與vertical-align：

#nav-container { 
 
    height: 300px; 
 
    background: red; 
 
    display:table; 
 
    width:100%; 
 
} 
 
#nav-container nav{ 
 
    display: table-cell; 
 
    height: 300px; 
 
    vertical-align: middle; 
 
    text-align:center; 
 
} 
 

 
#nav-container nav li{ 
 
    display:inline-block; 
 
    vertical-align: middle; 
 
}

<div id="nav-container"> 
 
    <nav> 
 
     <ul id="navlist"> 
 
      <li id="active"><a href="#" id="current">Item one</a> 
 
      </li> 
 
      <li><a href="#">Item two</a> 
 
      </li> 
 
      <li><a href="#">Item three</a> 
 
      </li> 
 
      <li> 
 
       <img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg"> 
 
      </li> 
 
      <li><a href="#">Item four</a> 
 
      </li> 
 
      <li><a href="#">Item five</a> 
 
      </li> 
 
     </ul> 
 
    </nav> 
 
</div>

JSFiddle

Answer 2

#nav-container { 
 
    height: 300px; 
 
    background: red; 
 
} 
 
#navlist li { 
 
    display: inline-block; /* this for personal preference :) */ 
 
    vertical-align: middle; /* this for alignment*/ 
 
    list-style-type: none; 
 
    padding-right: 20px; 
 
}

<div id="nav-container"> 
 
    <nav> 
 
     <ul id="navlist"> 
 
      <li id="active"><a href="#" id="current">Item one</a> 
 
      </li> 
 
      <li><a href="#">Item two</a> 
 
      </li> 
 
      <li><a href="#">Item three</a> 
 
      </li> 
 
      <li> 
 
       <img src="http://lorempixel.com/output/fashion-q-g-227-148-4.jpg"> 
 
      </li> 
 
      <li><a href="#">Item four</a> 
 
      </li> 
 
      <li><a href="#">Item five</a> 
 
      </li> 
 
     </ul> 
 
    </nav> 
 
</div>

Answer 3

爲了這個工作，你需要3件事情。

1）作爲容器的主分區 2）容器內的div，其垂直高度和容器的100％寬度，因爲您必須進行相對定位才能進行垂直對齊。 3）最後一個容器，用於完成您的保證金餘額，保證金右側自動。它必須具有比前兩個容器更小的設定寬度。4）所有的內容都位於水平分區內 5）不要設置主容器的高度，因爲這會限制垂直對齊超出這個範圍。

#nav-container { 
    background: red; 
    width: 100% 
} 

#vertical-align { 
    position: relative; 
    top: 50%; 
    width:100% 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 
#horizontal-align{ 
width: 100% 
max-width: 700px; 
margin-left: auto; 
margin-right: auto; 
}