Google.com navbarレプリカ

Question

私は自分のポートフォリオを構築していました。私が選んだ最初のプロジェクトは、Googleホームページの単純なレプリカでした。他のすべては今のところうまく見えますが、私の人生では、Navbar要素を垂直に中央に整列させることができません。私は別のディスプレイを使ってみましたが、すべての単一のliで垂直方向のプロパティを試しましたが、ダイスはありませんでした。

#top_navbar { 
 
    outline: none; 
 
    margin: 10px 25px; 
 
    float: right; 
 
    font-size: 10%; 
 
} 
 

 
ul { 
 
    vertical-align: middle; 
 
    display: flex; 
 
    direction: row-reverse; 
 
    list-style-type: none; 
 
    top: 30px; 
 
} 
 

 
li { 
 
    display: inline-block; 
 
    position: relative; 
 
    float: right; 
 
    margin-left: 15px; 
 
} 
 

 
i { 
 
    color: black; 
 
} 
 

 
i.account { 
 
    height: 200px; 
 
} 
 

 
a { 
 
    text-decoration: none; 
 
} 
 

 
a.Images { 
 
    font-size: 12px; 
 
    color: black; 
 
    vertical-align: bottom; 
 
} 
 

 
a.Gmail { 
 
    font-size: 12px; 
 
    color: black; 
 
} 
 

 
a:hover { 
 
    text-decoration: none; 
 
} 
 

 
.material-icons.notifications { 
 
    font-size: 18px; 
 
    padding: 5px; 
 
    color: white; 
 
    background-color: grey; 
 
    top: 30px; 
 
    border-radius: 30px; 
 
} 
 

 
.material-icons.apps { 
 
    font-size: 32px; 
 
    color: grey; 
 
} 
 

 
.material-icons.account { 
 
    font-size: 48px; 
 
    color: grey; 
 
}

<div id="top_navbar"> 
 
    <ul> 
 
    <li> 
 
     <a href="https://accounts.google.com/signin/v2/identifier?flowName=GlifWebSignIn&flowEntry=ServiceLogin" class="Gmail" target="_blank">Gmail</a> 
 
    </li> 
 
    <li> 
 
     <a href="https://images.google.ca/" class="Images" target="_blank">Images</a> 
 
    </li> 
 
    <li> 
 
     <div onclick="myFunction()"><i class="material-icons apps">apps</i></div> 
 
    </li> 
 
    <li> 
 
     <a href="#"><i class="material-icons notifications">notifications</i></a> 
 
    </li> 
 
    <li> 
 
     <a href="#"><i class="material-icons account">account_circle</i></a> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

li要素にline-heightを追加してみてください：以下の コードです。

li { 
    line-height: 32px; 
}