如何将占屏幕 90% 的导航栏居中 [重复]

Posted 2023-03-05

【中文标题】如何将占屏幕 90% 的导航栏居中 [重复]

【英文标题】：How to center a Navbar that is 90% of the screen [duplicate]

【发布时间】：2021-05-07 18:05:37

【问题描述】：

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

这是我的导航栏的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 居中并使用类名来居中，但它似乎总是左对齐。我希望它完全居中。

查看附件图片了解问题所在。

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

任何帮助将不胜感激。

【问题讨论】：

使用引导类 mx-auto

尝试将m-auto 类添加到您的导航栏

【参考方案1】：

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

【讨论】：

刚刚测试过，还是不行。

【参考方案2】：

将你的 nav 包裹在一个 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;