html - 如何将我的内容对齐到中心？

Question

所以我遇到了一个无法解决的问题。我想知道是否有人可以帮助我将按钮对齐到中心。我不知道为什么我有这个问题，我通常没有。考虑到我做的按钮很奇怪，当你看到代码时你就会明白。

#navbar-wrapper {
  width: 100%;
  height: 75vh;
  background-color: #1d1d1d;
  box-shadow: 0 0.5vh black;
}

.nav-btn-add {
  padding-top: 4vh;
  padding-bottom: 4vh;
  padding-left: 4vw;
  padding-right: 4vw;
}

.btn-inline-block {
  display: inline-block;
  text-align: center;
}

.nav-btn {
  padding-top: 2.5vh;
  padding-bottom: 2.5vh;
  padding-left: 2.5vw;
  padding-right: 2.5vw;
  cursor: pointer;
  background-color: transparent;
  color: white;
  transition: .5s;
}

.nav-btn:hover {
  background-color: transparent;
  color: #00C5CD;
  border-color: #00C5CD;
}

<div id="navbar-wrapper">
  <div class="url-cnt">
    <div class="btn-block">
      <form method="get" action="">
        <button class="nav-btn-add" type="submit"><a>ADD TO SERVER</a></button>
      </form>
    </div>
    <div class="btn-inline-block">
      <form method="get" action="commands.html">
        <button class="nav-btn" type="submit"><a>DISCORD</a></button>
      </form>
    </div>
    <div class="btn-inline-block">
      <form method="get" action="commands.html">
        <button class="nav-btn" type="submit"><a>COMMANDS</a></button>
      </form>
    </div>
    <div class="btn-inline-block">
      <form method="get" action="commands.html">
        <button class="nav-btn" type="submit"><a>UPVOTE</a></button>
      </form>
    </div>
  </div>
</div>

Answer 1

添加 text-align: center 你的父 Wrapper #navbar-wrapper

#navbar-wrapper {
  width: 100%;
  height: 75vh;
  background-color: #1d1d1d;
  box-shadow: 0 0.5vh black;
  text-align: center;
}

https://jsfiddle.net/d5wmto93/