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

前端之家收集整理的这篇文章主要介绍了css – Bootstrap 4:当徽标增加导航栏高度时垂直对齐导航链接前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

这是我的HTML

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

这是我的自定义CSS:

  1. .navbar-brand {
  2. font-size: 22px;
  3. img {
  4. display: inline-block;
  5. margin-right: 8px;
  6. width: 50px;
  7. height: 50px;
  8. }
  9. }

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

提前谢谢你

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

只需添加此CSS:

  1. .navbar-brand {
  2. padding: 0;
  3. }
  4. .navbar-nav .nav-link {
  5. padding-top: 0;
  6. padding-bottom: 0;
  7. height: 50px;
  8. line-height: 50px;
  9. }

CODEPEN

猜你在找的CSS相关文章