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) Основной div, действующий как контейнер 2) Диверс внутри контейнера с вертикальным выравниванием и шириной 100% от вашего контейнера, поскольку вам необходимо сделать относительное позиционирование, чтобы выполнить вертикальное выравнивание. 3) Конечный контейнер, чтобы сделать маржу слева, margin-right auto. Он должен иметь заданную ширину, меньшую, чем предыдущие два контейнера. 4) Весь ваш контент находится внутри горизонтального div. 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; 
}