css – Bootstrap 4：当徽标增加导航栏高度时垂直对齐导航链接

我是Bootstrap 4框架的新手,但即使阅读了StackOverFlow上的所有文档和所有现有的B4问题,我仍然有点卡住了.

在我的导航栏中,我插入了一个高度和宽度为50px的SVG徽标.这会自动使导航栏更高.我没有为此调整任何CSS,它只是强制导航栏高度增加的徽标.

这是我的HTML：

Meta charset="UTF-8">
    <Meta http-equiv="X-UA-Compatible" content="IE=edge">
    <Meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0">
    

这是我的自定义CSS：

.navbar-brand {
    font-size: 22px;
    img {
        display: inline-block;
        margin-right: 8px;
        width: 50px;
        height: 50px;
    }
}

我想导航链接是link1,link2和& link3垂直对齐标题是Bootstrap.

提前谢谢你

最佳答案

我认为您可以从链接中删除顶部和底部填充,并为其添加高度和行高.同时从.navbar-brand中删除填充.

只需添加此CSS：

.navbar-brand {
  padding: 0;
}
.navbar-nav .nav-link {
  padding-top: 0;
  padding-bottom: 0;
  height: 50px;
  line-height: 50px;
}

CODEPEN