如何将占屏幕 90% 的导航栏居中

Question

我想将导航栏作为一个整体居中，而不是导航栏的内容。

这是我的导航栏的 CSS 和 HTML。

.navbar {
  border-radius: 10px 10px 30px 30px;
  background: #3CE18F;
  overflow: visible;
  position: fixed;
  bottom: 3%;
  width: 90%;
}

<nav class="navbar fixed-bottom navbar-light bg-light">
    <a class="navbar-brand" href="#">Fixed bottom</a>
</nav>

我试过使用 css 居中并使用 class 名称居中，但它似乎总是左对齐。我希望它完全居中。

请参阅附图了解问题所在。

如您所见，导航栏被强制向左。我不想使用填充，因为它会因不同的屏幕尺寸而异。

任何帮助将不胜感激。

Answer 1

添加 display: block 和 margin: auto 到导航栏。添加 display: flex 到导航栏的父元素。应该可以。

Answer 2

将导航包裹在 div 内并添加属性 justify-content 使其水平对齐：

<div class="wrapper"><nav class="navbar fixed-bottom navbar-light bg-light">
    <a class="navbar-brand" href="#">Fixed bottom</a>
</nav></div>

.wrapper {
    display: flex;
    justify-content: center;
}

如何将占屏幕 90% 的导航栏居中

How to center a Navbar that is 90% of the screen

html

css

bootstrap-4

uinavigationbar