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您的父包装#navbar-wrapper

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

https://jsfiddle.net/d5wmto93/

Answer 2

在text-align中将center设置为#navbar-wrapper

#navbar-wrapper {
  width: 100%;
  height: 75vh;
  background-color: #1d1d1d;
  box-shadow: 0 0.5vh black;
  text-align: center;
}

.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;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
 
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <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>
  </body>
</html>

Answer 3

.center{
  text-align: center;
}

.btn-inline-block {
  display: inline-block;
}



<div class="center">
  <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>

Answer 4

只需将text-align: center;添加到div #navbar-wrapper

#navbar-wrapper {
  width: 100%;
  height: 75vh;
  background-color: #1d1d1d;
  box-shadow: 0 0.5vh black;
  text-align: center;
}

.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>

如何将内容与中心对齐？

4 个答案: