Multiline centered navbar item in bootstrap 4 - css

Question

I have a navbar, and it works fine when there are only single-line items:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link profile" href="#">
<div class="profile-info">
<span class="name">Артём</span>
</div>
</a>
</li>
</ul>
</div>
But when item is multiline, the other items lose center vertical alignment and align top instead:
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link profile" href="#">
<div class="profile-info">
<span class="name">Артём</span>
<span class="balance">31337 ₽</span>
</div>
</a>
</li>
</ul>
</div>
My SASS code:
#site-header {
background: #2d3840;
border-bottom: solid 1px #20272d;
height: 83px;
.navbar-brand {
color: white;
}
.nav-item {
&:not(:first-child) {
margin-left: 25px;
}
&:not(:last-child) {
margin-right: 25px;
}
// General link
a.nav-link {
color: white;
font-size: 16px;
text-align: center;
#include transition(0.5s);
&:hover {
#include transition(0.3s);
color: $color-accent;
}
&.active {
padding: 6px 21px 6px 21px;
background: $color-accent;
border-radius: 17.5px;
box-shadow: 0 2px 10px 0 rgba(90, 175, 238, 0.6);
&:hover {
color: white;
box-shadow: none;
}
}
// Profile
&.profile {
.profile-info {
display: inline-block;
.name {
display: block;
font-weight: bold;
}
.balance {
display: block;
font-size: 16px;
font-weight: bold;
color: $color-accent;
}
}
}
}
}
}
Desired:
So, how to center items when there are multi-line items?

Answer 1

Remove the profile-info and use these classes for the a tag.
d-flex - to make it flex
flex-column - to change its flex-direction property to column
text-right - to align its inline children on the right side of it
<li class="nav-item">
<a class="nav-link d-flex flex-column text-right" href="#">
<span class="name">Артём</span>
<span class="balance">31337 ₽</span>
</a>
</li>
To align the other items vertically in the center of the list, use align-self-center for each one of the li elements.
<li class="nav-item align-self-center">
<a class="nav-link" href="#">FAQ</a>
</li>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto">
<li class="nav-item active align-self-center">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item align-self-center">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item align-self-center">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item align-self-center">
<a class="nav-link" href="#">FAQ</a>
</li>
<li class="nav-item ">
<a class="nav-link d-flex flex-column text-right" href="#">
<span class="name">Артём</span>
<span class="balance">31337 ₽</span>
</a>
</li>
</ul>
</div>
</nav>