将图像添加到导航栏会破坏文本对齐

Question

我的导航栏在 header 中有以下 HTML 代码：

<nav id="navbar">
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Contact</a>
  <a href="">FAQ</a>
</nav>

我使用下面的 CSS 将其置于 header 中心：

navbar {text-align: center; display: block; height: 75px; line-height: 75px;}

header 看起来像这样：

现在，当我像这样向 header 添加图像时：

<nav id="navbar">
  <a href="">Home</a>
  <a href="">About</a>
  <img id = "navbar_img" src="https://dummyimage.com/75x75/000000/fff&text=headerimg" alt="header img">
  <a href="">Contact</a>
  <a href="">FAQ</a>
</nav>

header 看起来像这样：

为什么对齐被破坏了？如何将图像添加到导航栏的中间并保持对齐？

Answer 1

这样：

#navbar {
  text-align   : center; 
  height       : 75px; 
  border       : 2px solid grey;
  border-right : none;
  border-left  : none;
  padding      : 2px 0;
  } 
#navbar_img {
  vertical-align : middle; 
  clip-path      : circle(50% at center);
  }
#navbar a {
  text-decoration : none;
  display         : inline-block;
  width           : 75px;
  text-align      : center;
  }

<nav id="navbar">
  <a href="">Home</a>
  <a href="">About</a>
  <img id="navbar_img" src="https://dummyimage.com/75x75/000000/fff&text=headerimg" alt="header img">
  <a href="">Contact</a>
  <a href="">FAQ</a>
</nav>

Answer 2

使用弹性布局：

body{
  background-color: #a3a3a3;
}
nav{
  height: 75px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  display: flex;
  flex-direction:row;
  justify-content:center;
  align-items:center;
} 
a{
  display:flex;
  align-items: center;
  justify-content:center;
  height: 100%;
  width: calc(40%/4);
  text-decoration: none;
  color: #000;
  }
  a:hover{
    background-color: rgba(255, 255,255, 0.3);
  }

<nav>
  <a href="">Home</a>
  <a href="">About</a>
  <img id = "navbar_img" src="https://dummyimage.com/75x75/000000/fff&text=headerimg" alt="header img">
  <a href="">Contact</a>
  <a href="">FAQ</a>
</nav>

Answer 3

将 flex 与 justify-content: space-around 结合使用（为清楚起见添加了边框）：

#navbar,
#navbar1 {
  display: flex;
  justify-content: space-around;
  height: 75px;
  line-height: 75px;
  border: 1px solid red;
  margin-bottom: 3rem;
}

<nav id="navbar">
  <a href="">Home</a>
  <a href="">About</a>
  <a href="">Contact</a>
  <a href="">FAQ</a>
</nav>

<nav id="navbar1">
  <a href="">Home</a>
  <a href="">About</a>
  <img id="navbar_img" src="https://dummyimage.com/75x75/000000/fff&text=headerimg" alt="header img">
  <a href="">Contact</a>
  <a href="">FAQ</a>
</nav>

Answer 4

您必须将属性显示更改为 flex

#navbar {
            text-align: center; 
            display: flex; 
            justify-content: center;
            height: 75px; 
            line-height: 75px;
        }

将图像添加到导航栏会破坏文本对齐

Adding image to navbar breaks text alignment

html

css

navbar