将无序列表与类 list-inline 垂直居中在 div 中

如何解决将无序列表与类 list-inline 垂直居中在 div 中

我试图将无序列表 '.header-top-widget' 垂直居中在一个 div 中。但它不可能居中。

我试过了：

.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/bootstrap@5.0.1/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>

为什么 ul 没有在带有 flexBox 的 div 中居中？我在语义上做错了什么吗？我在 SO 中提到了各种问题。这可能是重复的，但我在尝试各种选项时无法解决这个问题。

请帮助解决此问题。

解决方法

临时解决方法可能是为社交和小部件设置不同的行高。

.header-top-widget a,.header-top-social a {
  display: inline-block;
  margin-right: 30px;
  line-height: 50px;
  font-size: 14px;
  color: #fff;
}

/* smaller widget line height */
.header-top-widget a{
  line-height: 30px;
}

.header-top {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 50px;
  background-color: #0e2737;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/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>