アイコンを含む「後」要素を垂直に整列する

Question

ナビゲーションメニューがあり、最初の項目はアイコンでコンテンツを置き換えます。私は、メイン要素のfont-sizeを0pxに設定し、その後にafter要素を追加することでこれを行います。これは一般的な習慣と思われ、これまでのところうまくいきます。

しかし、私は後の要素をナビゲーションメニューの残りの部分に揃えるように見えません。

私はline-heightとvertical-alignで遊んでいましたが、私の目標に近づけましたが、わかるように、まだ期待どおりに動作していません。

フィドルは、ここで見つけることができます：ここでhttps://jsfiddle.net/67dyxLr1/

<nav class="nav-primary"> 
    <ul class="menu"> 
    <li class="menu-item home"><a href="#">Home</a></li> 
    <li class="menu-item"><a href="#">Blog</a></li> 
    <li class="menu-item"><a href="#">Contact</a></li> 
    <li class="menu-item"><a href="#">About Us</a></li> 
    </ul> 
</nav> 

は私のCSSです：

.nav-primary { 
    background: #CCC; 
} 

.nav-primary li { 
    list-style-type: none; 
    display: inline-block; 
    text-align: left; 
    font-size: 26px; 
    line-height: 0px; 
} 

.nav-primary a { 
    display: inline-block; 
    padding: 32px 20px; 
    border: 1px dashed black; /* border only used for display purpose of alignment*/ 
    margin-right: -4px; 
} 

.nav-primary a:hover { 
    background: #FFF; 
} 

.menu { 
    width: 100%; 
} 

.menu-item { 

} 

.home a { 
    font-size:0px; 
} 

.home a:after { 
    font-family: "dashicons"; 
    content: " \f102"; 
    font-size: 40px; 
    display: inline-block; 
    vertical-align: middle; 
    line-height: 0px; 
} 

Answer 1

ちょうどあなたのli

CSSあなたは `オーバーフローを追加する必要が

.nav-primary li { 
    list-style-type: none; 
    display: inline-block; 
    text-align: left; 
    font-size: 26px; 
    line-height: 0px; 
    vertical-align: middle; 
} 

DEMO HERE

Answer 2

あなたは李に垂直整列を追加する必要があります。

.nav-primary { 
 
    background: #CCC; 
 
} 
 
.nav-primary li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    text-align: left; 
 
    font-size: 26px; 
 
    line-height: 0px; 
 
    vertical-align: middle; /* add this */ 
 
} 
 
.nav-primary a { 
 
    display: inline-block; 
 
    padding: 32px 20px; 
 
    border: 1px dashed black; 
 
    /* border only used for display purpose of alignment*/ 
 
    margin-right: -4px; 
 
} 
 
.nav-primary a:hover { 
 
    background: #FFF; 
 
} 
 
.menu { 
 
    width: 100%; 
 
} 
 
.menu-item {} .home a { 
 
    font-size: 0px; 
 
} 
 
.home a:after { 
 
    font-family: "dashicons"; 
 
    content: " \f102"; 
 
    font-size: 40px; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    line-height: 0px; 
 
}

<nav class="nav-primary"> 
 
    <ul class="menu"> 
 
    <li class="menu-item home"><a href="#">Home</a></li> 
 
    <li class="menu-item"><a href="#">Blog</a></li> 
 
    <li class="menu-item"><a href="#">Contact</a></li> 
 
    <li class="menu-item"><a href="#">About Us</a></li> 
 
    </ul> 
 
</nav>

あなたのメインメニューにhidden`：