Html 如何在导航菜单栏上固定高度px并对齐元素

我想将导航菜单栏的高度调整为37px（徽标高度），其中一部分我想调整图标及其文本，并将下拉菜单也调整为导航栏和内容对齐图标文本

对不起，我的css样式很难，我是初学者

/*当用户单击按钮时，
在隐藏和显示下拉内容之间切换*/
函数dropdownClick（）{
document.getElementById（“myDropdown”）.classList.toggle（“show”）；
}
//如果用户在下拉菜单外单击，请关闭下拉菜单
window.onclick=函数（事件）{
如果（！event.target.matches（'.dropbtn'））{
var dropdowns=document.getElementsByClassName（“下拉内容”）；
var i；
对于（i=0；i

/*Definimos la fuente personalida para la web*/
@字体{
字体系列：Gotham Light；
src:url（'../../assets/webfont/Gotham Light.ttf'）格式（'truetype'）；
}
@字体{
字体系列：高谭中等；
src:url（'../../assets/webfont/Gotham Medium.ttf'）格式（'truetype'）；
}
html{
字体系列：Gotham Light；
位置：相对位置；
最小高度：100%；
}
.选项菜单{
字体系列：高谭中等；
}
身体{
边际：0px；
}
/*Def。导航栏*/
导航{
宽度：100%；
高度：37像素；
}
保险商实验室{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#dedee1；
}
李{
浮动：左；
}
李a,，
.dropbtn，
.img{
显示：内联块；
颜色：黑色；
文本对齐：居中；
填充：14px 16px；
文字装饰：无；
}
李a：悬停，
.dropdown:悬停.dropbtn{
背景色：#e0f2fd；
}
li.下拉列表{
显示：内联块；
}
.下拉内容{
显示：无；
位置：绝对位置；
右：0；
背景色：#f9f9f9；
最小宽度：160px；
盒影：0px 8px 16px 0px rgba（0,0,0,0.2）；
}
.下拉内容a{
颜色：黑色；
填充：12px 16px；
文字装饰：无；
显示：块；
文本对齐：左对齐；
}
.下拉列表内容a：悬停{
背景色：#f1f1
}
I.I康明{
浮动：左；
}
.icontxt{
利润上限：4倍；
}
.表演{
显示：块；
}
.dropbtn i{
浮动：左；
}

据我所知，以下更改将满足您的需求：

删除此处的填充（a标签上的填充导致导航栏看起来更大）

添加以下类样式：

.material-icons { 
  vertical-align: middle;

}

这将使您的文本和图标对齐

我想这是你想要的吗？

请试试这个

编辑CSS

@font-face {
  font-family: Gotham-Light;
  src: url('../../assets/webfonts/Gotham-Light.ttf') format('truetype');
}
@font-face {
  font-family: Gotham-Medium;
  src: url('../../assets/webfonts/Gotham-Medium.ttf') format('truetype');
}
html {
  font-family: Gotham-Light;
  position: relative;
  min-height: 100%;
}
.optionMenu {
  font-family: Gotham-Medium;
}
body {
  margin: 0px;
}
/* Def. Navigation Bar */

nav {
  width: 100%;
  height: 37px;
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  /* overflow: hidden; */    /* removed */
  background-color: #dedee1;
}
li {
  float: left;
}
li a,
.dropbtn,
.img {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 4px 16px 3px 16px; /* edited */
  text-decoration: none;
  vertical-align: middle;  /* edited */
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: #e0f2fd;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 178px;  /* edited */
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #f1f1f1; /* edited */
}
.iconimg {
  float: left;
}
.icontxt {
  margin-top: 4px;
}
.show {
  display: block;
}
.dropbtn i {
  /* float: left; */ /* removed */
}

/* Added new css style */
.material-icons{   
  vertical-align: middle !important;
}

和已编辑的HTML代码段-

<img height="37px" src="assets/images/brand-logo.png" />

您试图实现所需外观的“变体”是什么？请为您的应用程序添加JSFIDLEcode@YashwardhanPauranik我相信，如果可能的话，使用他们的代码片段特性而不是JS Fiddle通常被认为是一种更好的做法。小提琴可能会过期，让未来的观众猜测问题的内容。总的来说，内容绝对应该被安排成逻辑部分，现在是。1）我尝试定义一个容器样式，并创建选项菜单：“图像+文本”来使用display:flex并定义每个元素的框，每个元素的宽度都是固定的。Ok@MattD抱歉，我是一个初学者。我会去做的。或多或少，文本的“框”比logo少，效果是错误的，不适合导航菜单。此外，在标志的底部有一条灰色的导航条，它也不适合。您的图像没有加载给我们，所以很难正确地检查原因。。。你能给我一张你想要达到的效果的模型图片吗？我不知道如何在信息中插入图片：（好！只是一件事，导航栏的背景颜色是写的，我无法更改它！如果它被删除：溢出：隐藏；那么背景没有颜色。我正在尝试其他溢出选项。它已经工作正常。谢谢你的帮助。问题是背景颜色应用于导航，而不是ul。溢出也被删除。

<img height="37px" src="assets/images/brand-logo.png" />