html - Shopify Supply Theme - 如何将导航栏上的元素垂直居中？

Question

所以我已经从初始布局更改了它，但这是我的导航栏当前的样子:

Nav Bar

这是我搞砸的代码:

<nav class="nav-bar" role="navigation">
<div class="wrapper">      
  <div class="grid">
      <div class="grid-item large--one-half">
        {% include 'site-nav' %}
      </div>

      <div class="grid-item large--one-half text-right">
        <a href="/cart" class="header-cart-btn cart-toggle">
        <span class="icon icon-cart"></span>
        {{ 'layout.cart.cart' | t }} <span class="cart-count cart-badge--desktop {% if cart.item_count == 0 %}hidden-count{% endif %}">{{ cart.item_count }}</span>
        </a> 
      </div>
  </div>
</div>
</nav>

所以我的问题是:有没有我可以编写的另一个拙劣的东西来使导航按钮和购物车按钮彼此水平？我已经玩了几个小时了，但一无所获:(

提前致谢

劳拉:)

Answer 1

您的“grid-item large--one-half”类导致网格元素被分成两半。例如，如果您要向其中添加“text-align: center”，您的菜单将以父 div 的限制为中心。您必须将菜单 div 设置为页面宽度的 100%，然后像这样放置购物车链接。

.cart {
position: absolute;
top: 7px;
right: 3%;
line-height: 50px;}

就使链接具有相同的高度而言，您可以为所有内容添加行高，以便文本将在定义的高度居中。

我创建了一个 quick fiddle 来帮助您回答其中的一些问题作为引用。

https://jsfiddle.net/zsrjmLrd/