我一直在使用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标签垂直居中对齐?我们需要添加父容器吗?
答案 0 :(得分: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);
}