在反应引导导航栏中添加内联块移动下面的其他项目

Question

我一直在使用 react bootstrap 中的导航栏。

在navbar-link 项目中，我需要添加一个图像，后跟一个分隔符。

为此，我在 nav-bar 链接中添加了一个 div 后跟图像。

为了让它们位于同一行，我将分隔符显示属性设为inline-block。当我这样做时，该 div 左侧的图像会向下移动一点。

发生了什么？

inside navbar:
<Nav.Link href="#UNKNOWN">
        <img
        src="assets/group-6.png"
        alt="unkown">
        </img>
        <div className = "seperator">
        </div>
    </Nav.Link> 
css: 

.seperator{
  display: inline-block;
  width: 3px;
  height: 38px;
  border: solid 1px #dfdfdf;
}

如何使图像和分隔符 div 标签垂直居中对齐？我们需要添加父容器吗？

Answer 1

您可以添加此CSS。

.nav-link{
    display: flex;
    align-self: center;
}

.nav-link img{
    align-self: center;
}

.nav-link .seperator{
    margin-left: 10px;
    width: 3px;
    height: 38px;
    border: 1px solid rgb(223, 223, 223);
}