Выровнять логотип посередине между меню (основа основания)

Question

пытается выровнять логотип посередине между меню, пытаясь сделать это с помощью основания zurb. что-то вроде [меню1] [меню2] - [логотип] - [меню3] [меню4].

Конечно, это могло бы работать, используя систему сетки:

<div class="panel hide-for-small-down"> 
    <div class="row"> 
     <div class="large-4 columns"> 
      <nav> 
      <ul> 
       <li>About</li> 
       <li>Portfolio</li> 
      </ul> 
      </nav> 
     </div> 
     <div class="large-4 columns"> 
      <img src="http://placehold.it/350x150"> 
     </div> 

     <div class="large-4 columns"> 
      <nav> 
      <ul> 
       <li>Blog</li> 
       <li>Contact</li> 
      </ul> 
      </nav> 
     </div> 
    </div> 
</div> 

не пробовал CSS еще кроме этого простой, не возражаю класс топ-нав но.

ul li{ 
list-style: none; 
display: inline-block; 
padding: 15px; 
background: #ccc; 
} 

Answer 1

Я хотел бы использовать display: inline-block и vertical-align: middle

DEMO http://jsfiddle.net/AA49p/1/

.large-4 { 
    display: inline-block; 
    vertical-align: middle; 
} 

Answer 2

Ваш испытывают эту проблему, поскольку столбцы сетки Foundation имеют определенную ширину, которая не зависит от содержания.
В настоящее время логотип находится на самом деле точно в центре, но, конечно, он не похож на него. Это потому, что содержание оправдано слева, а ваши навигаторы намного уже, чем их родители («большие-4» с)

Это проще показать. Вы увидите, что этот код приносит вам гораздо ближе к желаемому результату:

<div class="panel hide-for-small-down"> 
<div class="row"> 
    <div class="large-3 columns"> 
     <nav> 
     <ul> 
      <li>About</li> 
      <li>Portfolio</li> 
     </ul> 
     </nav> 
    </div> 
    <div class="large-5 columns"> 
     <img src="http://placehold.it/350x150"> 
    </div> 

    <div class="large-4 columns"> 
     <nav> 
     <ul> 
      <li>Blog</li> 
      <li>Contact</li> 
     </ul> 
     </nav> 
    </div> 
</div> 

Все, что я сделал изменить первый столбец «большой 3», а второй к «большой 5». Теперь похоже, что он центрирован.

Возможно, этот результат удовлетворит вас. Но знайте, что это не лучший способ центрировать логотип, используя grid-столбцы.

Другим простым решением является «плавать: правый» правый навигатор.