Shopify Supply Theme - 항목을 탐색 모음에 세로로 가운데에 배치하려면 어떻게합니까?

그래서 난 이미 초기 레이아웃에서 이것을 변경했습니다, 그러나 이것은 내 탐색 모음 현재 모습입니다 :Shopify Supply Theme - 항목을 탐색 모음에 세로로 가운데에 배치하려면 어떻게합니까?

을 그리고이 나는 것이지 한 코드입니다 :

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

제 질문은 : 네비게이션 버튼과 카트 버튼 레벨을 서로 맞추기 위해 작성할 수있는 또 다른 bot가 있습니까? 나는 몇 시간에 대한 주위 플레이를 했어 어디서나 없어 :(사전에

감사를

로라 :

출처

2016-07-30 Laura Parsons

css를 주면 도움이 될 수도 있습니다. : D ... 아니면, JSFiddle 예제를 제공하는 것이 좋을 것이다. –

@ JefréN. 어떻게해야합니까? 미안 나는 이것에 진짜로 나쁘다 !! –

어떤 부분을 수행합니까? navbar에 대한 CSS 추가는 html을 추가 한 것과 같은 방식으로 수행됩니다. JSFiddle은 css, html, javascript로 특정 프로젝트 나 아이디어를 둘러보기 위해 사용됩니다. 다음은 [예]입니다. (https://jsfiddle.net/welcome_me/z4tfyhdw/) JSFiddle 예제는 누군가 문제를 파악하려고 할 때 유용합니다. 그러나이 시점에서'css '가 아마도 가장 유용 할 것입니다. –

당신의 "그리드 항목 대형 - 반" 클래스에 따라 그리드 항목이 2 개 반으로 분리됩니다. 예를 들어 "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 Theme - 항목을 탐색 모음에 세로로 가운데에 배치하려면 어떻게합니까?

답변

관련 문제