Question

试图在菜单中间对齐徽标，尝试使用基础zurb。类似[menu1] [menu2] - [logo] - [menu3] [menu4]。

enter image description here

当然可以使用网格系统：

<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之外还没有尝试过任何CSS，不要介意top-nav类，但是。

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

您遇到此问题，因为基础网格列具有一定宽度，不依赖于内容目前你的徽标实际上正好在中心，但当然它看起来并不像。这是因为左边的内容是合理的，你的导航比他们的父母要窄得多（“大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>

我所做的只是将第一列更改为“large-3”，将第二列更改为“large-5”。现在它看起来像是居中的。

可能这个结果会让你满意。但要知道，这不是使用网格列来居中徽标的最佳方式。

另一个简单的解决方案是“浮动：右”右侧导航。

在菜单中间对齐徽标（基础框架）

2 个答案: