Align logo in the middle between menus (foundation framework) - html

Question

been trying to align the logo in the middle between menus trying to make it using foundation zurb.
something like [menu1] [menu2] --[logo]-- [menu3] [menu4].
Sure it might work using the grid system:
<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>
Haven't tried any CSS yet apart from this simple one, don't mind the top-nav class but.
ul li{
list-style: none;
display: inline-block;
padding: 15px;
background: #ccc;
}

Answer 1

I would use display: inline-block and vertical-align: middle
DEMO http://jsfiddle.net/AA49p/1/
.large-4 {
display: inline-block;
vertical-align: middle;
}

Answer 2

Your are having this problem because Foundation grid columns have a certain width which does not depend on the content.
Currently you logo is actually exactly in the center, but of course it doesn't look like it is. That's because the content is justified to the left and your navs are much narrower than their parents ("large-4"s)
It's easier to show.
You will find that this code brings you much closer the desired result:
<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>
All I did was change the first column to "large-3" and the second to "large-5".
Now it looks like it is centered.
May be this result will satisfy you. But know that it's just not the best way to center a logo using grid-columns.
Another easy solution is to "float: right" the right nav.