Shopify Supply主题 - 如何在导航栏上垂直居中放置物品？

所以我已经改变了这个从最初的布局，但这是我的导航栏当前的外观：Shopify Supply主题 - 如何在导航栏上垂直居中放置物品？

这是我拙劣的代码：

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

所以我的问题是：是否有另一个我可以写在导致按钮和购物车按钮水平彼此的拙劣？我已经绕了几个小时戏，还没有得到任何地方:(提前

感谢

劳拉:)

来源

2016-07-30 Laura Parsons

如果你给了你的css，可能会更容易帮助你。：D ...或者，提供一个JSFiddle示例会很好。 –

@JefréN。我怎么做？对不起，我真的很糟糕！ –

做什么？为导航栏添加css的方式与添加html相同。 JSFiddle用于为特定的项目或想法提供css，html和javascript。这里有一个[示例]（https://jsfiddle.net/welcome_me/z4tfyhdw/）当有人试图找出你的问题是什么时，JSFiddle示例很有用。然而，在这一点上，'css'可能是最有用的。 –

你的“并网项目大 - 二分之一”课程导致网格项目被分成两半。例如，如果您要为其添加“text-align：center”，则菜单将居中父div的极限。您必须将菜单div设为页面宽度的100％，然后将购物车链接绝对地放置。

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

在制造环节的高度相同的方面，可以将行高增加的一切，使文本将在规定的高度上中心。

我创建了一个快速小提示帮助回答一些这个给你作为参考。

https://jsfiddle.net/zsrjmLrd/

来源

2016-08-01 18:05:06

Shopify Supply主题 - 如何在导航栏上垂直居中放置物品？

回答

相关问题