1

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].

enter image description here

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;
 }
strivedi183
  • 4,749
  • 2
  • 31
  • 38
nCore
  • 2,027
  • 7
  • 29
  • 57
  • What you posted seems to work fine: http://jsfiddle.net/AA49p/ Are you having a different result? – redleaf Apr 12 '14 at 19:16
  • well yeah i know it worked, but I want to align the menus with the logo. something like this http://www.wix.com/support/forum/html5/editor/buttons-and-menus/menu-buttons-out-of-alignment – nCore Apr 12 '14 at 19:38
  • I added what I currently have, but I want to make the spaces equal and put the menus down a bit so its align middle with the logo. – nCore Apr 12 '14 at 19:45

2 Answers2

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;
}
Kevin Lynch
  • 24,427
  • 3
  • 36
  • 37
0

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.

timetowonder
  • 5,121
  • 5
  • 34
  • 48
  • I've tried this :) and tried the float too but not the answer i was looking for, ty for trying. – nCore Apr 12 '14 at 21:20
  • What do you mean? What are you looking for, then? You said you want the logo to be exactly in the middle. If you "float: right" the right navigation you get exactly that: http://jsfiddle.net/9gGY9/ (you should widen the 'result' window to see it correctly)
    If you want to center the navs vertically, the easiest way is to use margin-top for them.
    But if you want your navigation element and the logo evenly justified, then you should use other techniques. May be like this: http://stackoverflow.com/questions/49536/how-do-i-really-justify-a-horizontal-menu-in-htmlcss     – timetowonder Apr 13 '14 at 18:38