Question

尝试将导航栏设置为居中，但是imo看起来更靠近左侧而不是右侧。

我将其宽度和剩余宽度的一半作为左侧边距，但没有变化。我将元素的边距设置为0（以防可能影响），并且与填充相同。有谁知道我没有指望有保证金的元素吗？谢谢

nav{
    display: block;
    width: 50%;
    padding: 0;
    margin-left: 25vw;
    margin-top: 5vh;
    margin: auto;
}

Answer 1

为此，我建议使用弹性盒。您将需要一个这样的内部元素：

nav {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #ededed;
}

.inner {
  background-color: #ccc;
  width: 50%;
  text-align: center;
}

<nav>
  <div class="inner">
    Hello world!
  </div>
</nav>

Answer 2

您已接近解决方案。首先，在 margin-XXX之后指定边距，将其覆盖。该解决方案包括使margin-top保持不变，并将margin-left和margin-right都设置为auto。

注意：在演示中，我为导航设置了边框，以便可以看到它居中。同样，出于审美原因，我将文本放在导航中。

nav{
    display: block;
    width: 50%;
    padding: 0;
    /*margin-left: 25vw;*/
    margin-top: 5vh;
    margin-left: auto;
    margin-right: auto;
    border: solid 1px red;
    text-align: center;
}

<nav>
navigation menu
</nav>

两侧相同的边距，仍然看起来不居中

2 个答案: