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主題 - 如何在導航欄上垂直居中放置物品？

回答

相關問題