Bootstrap 4中的垂直中心项目答案

【问题标题】：Vertical center items in Bootstrap 4Bootstrap 4中的垂直中心项目
【发布时间】：2020-08-06 11:47:54
【问题描述】：

如何在下拉菜单导航栏中将文本居中对齐？

我有这个：

我已经尝试关注 sn-ps 但我没有成功。

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

这是我的实际代码 https://codeply.com/p/zNU5s3kyQl

【问题讨论】：

您需要在此处在您的问题中发布minimal reproducible example，并在任何第三方网站上发布not a link。但是您的问题在整个 SO 中重复出现，我相信您可以通过简单的搜索找到答案。

标签： html css twitter-bootstrap bootstrap-4 flexbox

【解决方案1】：

在 dropdown-item 中使用下面的 CSS 或在每个 dropdown-item 中添加 d-flex justify-content-center align-items-center 类。

.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>

【讨论】：