CODEWITHSUNDEEP
htmlcssreact-bootstrap
Ayyappa Gollu
Ayyappa Gollu

Reputation: 966

Adding Inline-block moving other items below in react bootstrap navbar

I have been using navbar from react bootstrap.

Inside the navbar-link item I need to add an image followed by a seprator rectangle.

For this I added a div followed by image inside nav-bar link.

For them to be on same line I made seperator display property to be inline-block. When I do that image left side of this div is moving down a bit.

What is happening ? enter image description here

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

How to make image and separator div tag vertically aligned center?. Do we need to add parent container ?

Upvotes: 1

Views: 1159

Answers (1)

ravibagul91
ravibagul91

Reputation: 20765

You can add this 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);
}

Upvotes: 1

Related Questions