如何将下拉菜单导航栏中的文字对齐到中间?
我有这个问题。
我已经试着按照代码段来做了,但我没有成功。
<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/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>