Google.com navbar Replica

Question

所以，我一直在构建我的投资组合，我选择的第一个项目是Google主页的简单副本。所有其他现在看来很好，但对我来说，我无法让导航栏元素垂直居中对齐。我尝试过使用不同的显示器，尝试每个单元里的垂直对齐属性，但没有骰子。 以下是代码：

#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

尝试添加line-height到li元素。

li { 
    line-height: 32px; 
}