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; 
}