Bootstrap 4中的垂直中心项目

问题描述 投票:0回答:1

如何将下拉菜单导航栏中的文字对齐到中间?

我有这个问题。

enter image description here

我已经试着按照代码段来做了,但我没有成功。

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

twitter-bootstrap bootstrap-4
1个回答
1
投票

在您的网站上使用以下CSS dropdown-item 或加 d-flex justify-content-center align-items-center 各班 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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
© www.soinside.com 2019 - 2024. All rights reserved.