Struggling to vertically center the unordered list '.header-top-widget' within a div. Despite trying several methods, I can't seem to get it centered.
My attempts so far include:
.header-top-widget
{
display:flex;
align-items:center;
}
.header-top-widget a,
.header-top-social a {
display: inline-block;
margin-right: 30px;
line-height: 50px;
font-size: 14px;
color: #fff;
}
.header-top {
position: relative;
z-index: 1;
width: 100%;
height: 50px;
background-color: #0e2737;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="37555858434443455647770219071906">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<header class="header">
<div class="header-top">
<div class="container">
<div class="d-flex justify-content-between">
<div class="header-top-widget">
<ul class="list-inline">
<li class="list-inline-item">
<a href="url" title="instagram" target="_blank" class="nav-link">
<i class="fas fa-phone"></i> 96 Ernser Vista Suite 437, NY, US
</a>
</li>
<li class="list-inline-item">
<a href="url" title="instagram" target="_blank" class="nav-link">
<i class="fas fa-envelope-open-text"></i> (123) 456-78-910
</a>
</li>
</ul>
</div>
<div class="header-top-social">
<ul class="header-top-social list-inline">
<li class="list-inline-item">
<a href="url" title="instagram" target="_blank">
<i class="fab fa-instagram-square"></i>
</a>
</li>
<li class="list-inline-item">
<a href="url" title="twitter" target="_blank">
<i class="fab fa-twitter"></i>
</a>
</li>
<li class="list-inline-item">
<a href="url" title="facebook" target="_blank">
<i class="fab fa-facebook-f"></i>
</a>
</li>
<li class="list-inline-item">
<a href="url" title="linkedin" target="_blank">
<i class="fab fa-linkedin"></i>
</a>
</li>
<li class="list-inline-item">
<a href="url" title="skype" target="_blank">
<i class="fab fa-youtube"></i>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<nav class="">
</nav>
</header>Looking for assistance on why the ul element isn't centering within the div using flexbox. Any semantic errors in my approach? Have scoured various Stack Overflow threads but still struggling. Any workarounds or solutions would be greatly appreciated.
Please provide guidance on how to achieve the desired vertical centering.