Vertical center items in Bootstrap 4 - html

Question

How can I align text to the middle in a dropdown menu navbar?
I have this:
I already try to follow snippets but I don't have success.
<ul class="navbar-nav ml-auto">
<li ngbDropdown class="nav-item dropdown">
<a ngbDropdownToggle class="nav-link dropdown-toggle" [routerLink]="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>menu</span>
<div ngbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item">OPTION 1</a>
<hr class="menu-item--division">
<a class="dropdown-item">OPTON 2</a>
<hr class="menu-item--division">
<a class="dropdown-item">OPTION 3</a>
<hr class="menu-item--division">
<a class="dropdown-item">OPTION 4</a>
<hr class="menu-item--division">
<a class="dropdown-item">OPTON 5</a>
</div>
</li>
</ul>
This is my actual code
https://codeply.com/p/zNU5s3kyQl

Answer 1

Use below CSS in your dropdown-item or add d-flex justify-content-center align-items-center classes in each dropdown-item.
.dropdown-item {
display: flex;
justify-content: center;
align-items: center;
}
.dropdown-menu hr {
margin-top: 0;
margin-bottom: 0;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.dropdown-menu a {
height: 53px;
}
.dropdown-item {
text-align: center;
}
.dropdown-item:hover,
.dropdown-item:focus {
color: #16181b;
text-decoration: none;
background-color: #F3F3F3;
text-align: center;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<ul class="navbar-nav ml-auto">
<li ngbDropdown class="nav-item dropdown">
<a ngbDropdownToggle class="nav-link dropdown-toggle" [routerLink]="" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span>menu</span>
<div ngbDropdownMenu class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item d-flex justify-content-center align-items-center">OPTION 1</a>
<hr class="menu-item--division">
<a class="dropdown-item d-flex justify-content-center align-items-center">OPTON 2</a>
<hr class="menu-item--division">
<a class="dropdown-item d-flex justify-content-center align-items-center">OPTION 3</a>
<hr class="menu-item--division">
<a class="dropdown-item d-flex justify-content-center align-items-center">OPTION 4</a>
<hr class="menu-item--division">
<a class="dropdown-item d-flex justify-content-center align-items-center">OPTON 5</a>
</div>
</a>
</li>
</ul>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>