Foundation 导航栏中的垂直对齐文本

Question

我正在尝试获取顶栏导航菜单，该菜单在左下角包含一个 280 x 70 图像，并与右侧的菜单选项对齐。我可以在 Foundation 中左右对齐文本，但找不到垂直对齐的方法。

<div class="row full-width">
<div class="large-4 columns">
    <img src="MyLogo.png" width="280" height="70" alt="My 280 x 70 Logo" />
</div>
<div class="large-8 columns">
    <nav class="top-bar" data-topbar role="navigation">
        <ul class="title-area">
            <li class="name">
                <div class="logo"> <a href="#"></a>
                </div>
            </li>
            <li class="toggle-topbar menu-icon"> <a href="#"><span></span></a>
            </li>
        </ul>
        <section class="top-bar-section">
            <!-- Right Nav Section -->
            <ul class="right">
                <li class="active"> <a href="/home/index" class="menuMix">
                            <span class="menuMinor">Home Page</span>
                            <span class="menuMain allCaps">Home</span>
                        </a>
                </li>
                <li class=""> <a href="/home/about" class="menuMix">
                            <span class="menuMinor">Who We Are</span>
                            <span class="menuMain allCaps">About</span>
                        </a>
                </li>
                <li class=""> <a href="/home/contact" class="menuMix">
                            <span class="menuMinor">Get In Touch</span>
                            <span class="menuMain allCaps">Contact</span>
                        </a>
                </li>
            </ul>
        </section>
    </nav>
</div>

Answer 1

最简单的方法是使用 flexbox。

.top-bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

Foundation 导航栏中的垂直对齐文本

Vertical aligning text in Foundation nav bar

css

zurb-foundation