與按鈕Shopify

Question

對齊文本我有這樣的HTML和相應的CSS代碼中Shopify

.mobile-menu-icon { 
 
    @include prefix(transform, rotate(0deg), webkit moz ms o); 
 
    @include prefix(transition, 0.5s ease-in-out, webkit moz ms o); 
 
    width: 6.66 * $mobile-icon-line-thickness; 
 
    height: 5 * $mobile-icon-line-thickness; 
 
    display: block; 
 
    display: block; 
 
    margin: (2 * $gutter/3) auto; 
 
    color: $color-nav; 
 
    background: none; 
 
    border: 0; 
 
    outline: none;

<a> 
 
     <button id="ToggleMobileMenu" class="mobile-menu-icon medium-up--hide" aria-haspopup="true" aria-owns="SiteNav"> 
 
     <span class="line"></span> 
 
     <span class="line"></span> 
 
     <span class="line"></span> 
 
     <span class="line"></span> 
 
     
 
     <span class="icon__fallback-text">{{ 'layout.navigation.menu' | t }}</span> 
 
     </button></a>

的這個在我的網站的輸出是這樣（我已經指出帶箭頭）：

我想要做的就是寫「MENU」旁邊的這個按鈕，在那裏我有畫n表示目的的紅線。我嘗試了各種選項，但我正在努力將它們正確對齊，以便與不同尺寸的顯示器兼容，以及按鈕保持中央，以及文本保留在按鈕中央。

任何幫助將不勝感激， 非常感謝。

Answer 1

.mobile-menu-icon { 
 
    @include prefix(transform, rotate(0deg), webkit moz ms o); 
 
    @include prefix(transition, 0.5s ease-in-out, webkit moz ms o); 
 
    width: 6.66 * $mobile-icon-line-thickness; 
 
    height: 5 * $mobile-icon-line-thickness; 
 
    display: block; 
 
    display: block; 
 
    margin: (2 * $gutter/3) auto; 
 
    color: $color-nav; 
 
    background: none; 
 
    border: 0; 
 
    outline: none; 
 
    } 
 
    .mobile-menu-icon:after{ 
 
    content: 'MENU'; 
 
    } 
 

<a> 
 
     <button id="ToggleMobileMenu" class="mobile-menu-icon medium-up--hide" aria-haspopup="true" aria-owns="SiteNav"> 
 
     <span class="line"></span> 
 
     <span class="line"></span> 
 
     <span class="line"></span> 
 
     <span class="line"></span> 
 
     
 
     <span class="icon__fallback-text">{{ 'layout.navigation.menu' | t }}</span> 
 
     </button></a>