Bootstrap 4中的垂直中心项目

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

我有这个问题。

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

解决方案:

在您的网站上使用以下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/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>

给TA打赏
共{{data.count}}人
人已打赏
解决方案

如何将Python数据框中的数字列导出为带逗号分隔符的整数列,并能够将它们相加、相除、相乘?

2022-5-12 6:00:19

解决方案

如何处理Arduino中M5Stack库的编译错误?

2022-5-12 6:00:21

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索