在React Bootstrap导航栏中添加以下内容的内联块移动其他项目

Question

我一直在使用React Bootstrap中的navbar。

在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);
}