如何使两个按钮彼此相邻，同时让它们保持水平居中于网页？答案

【问题标题】：How can I make two buttons next to each other while having them remain being horizontally centered to the webpage?如何使两个按钮彼此相邻，同时让它们保持水平居中于网页？
【发布时间】：2018-07-08 04:34:14
【问题描述】：

我目前正在尝试使两个按钮居中并显示内联，以便第一个按钮向左浮动，而另一个按钮水平显示在第一个按钮的另一侧，而所有这些都以页面为中心。

但由于某种原因，我被卡住了，可能遗漏了一些非常明显的东西，无论出于何种原因，我都无法弄清楚。

这就是我所拥有的：

body {
  background: url("background/background.jpg");
}

.top {
  color: black;
  font-family: "Lemon";
}

.top-rectangle {
  width: 100%;
  background-color: black;
  height: 60px;
}

.main-buttons {
  display: inline;
  position: absolute;
  margin: 0 auto;
  width: 100%;
  text-align: center;
  float: left;
}

.top-main {
  font-family: "american-font";
  color: white;
  font-size: 32pt;
  text-align: center;
  width: 800px;
  margin: auto;
  letter-spacing: 3px;
}

.top-plans {
  font-family: "max-impact";
  color: white;
  font-size: 15pt;
  text-align: center;
  width: 500px;
  margin: auto;
}

.btnop {
  background: #298371;
  color: white;
  height: 104px;
  width: 308px;
  font-size: 1.2em;
  border-radius: 5px;
  border-width: 0px;
  cursor: pointer;
}

.btnop:hover {
  background-color: #204e45;
}

#downloadbutton {}

#purchasebutton {}

<body>

  <div class="top">
    <h1>DELUXEVIEWBOT</h1>
  </div>

  <div class="top-rectangle">

  </div>

  <div class="top-main">
    <p>Deluxe Viewbot is able to increase viewership by more than 1000% your very first time using our service!</p>
  </div>

  <div class="top-plans">
    <p>Plans start at $15 a week and $40 a month!</p>
  </div>

  <div class="main-buttons">

    <form method="get" action="downloads/list.php">

      <button type="submit" class="btnop" style="text-align: center" id="downloadbutton">Download</button>

    </form>

    <form method="get" action="purchase">

      <button type="button" class="btnop" style="text-align: center" id="purchasebutton">Purchase</button>

    </form>

  </div>

</body>

【问题讨论】：

标签： html css

【解决方案1】：

<span style="display: inline;">
    <form method="get" action="downloads/list.php">
          <button type="submit" class="btnop" style="text-align: center"  
              id="downloadbutton">Download</button>   
    </form>
    <form method="get" action="purchase">   
    <button type="button" class="btnop" style="text-align: center" 
              id="purchasebutton">Purchase</button>
    </form>
</span>

【讨论】：

请在您的代码中添加一些解释 (stackoverflow.com/help/how-to-answer)

【解决方案2】：

在.main-buttons 上使用display: flex; 而不是display: inline; 和justify-content: center; 使按钮居中。

    body {
        background: url("background/background.jpg");
    }

    .top {
        color: black;
        font-family: "Lemon";
    }

    .top-rectangle {
        width: 100%;
        background-color: black;
        height: 60px;
    }

    .main-buttons {
      display: flex;
      position: absolute;
      justify-content: center;
      margin: 0 auto;
      width: 100%;
      text-align: center;
      float: left;
    }

    .top-main {
        font-family: "american-font";
        color: white;
        font-size: 32pt;
        text-align: center;
        width: 800px;
        margin: auto;
        letter-spacing: 3px;
    }

    .top-plans {
        font-family: "max-impact";
        color: white;
        font-size: 15pt;
        text-align: center;
        width: 500px;
        margin: auto;
    }

    .btnop {
        background: #298371;
        color: white;
        height: 104px;
        width: 308px;
        font-size: 1.2em;
        border-radius: 5px;
        border-width: 0px;
        cursor: pointer;
        }
        
    .btnop:hover {
        background-color: #204e45;
    }

    #downloadbutton {
        
    }

    #purchasebutton {
        
    }

<body>

    <div class="top">
    <h1>DELUXEVIEWBOT</h1>
    </div>
    
    <div class="top-rectangle">
        
    </div>
    
    <div class="top-main">
    <p>Deluxe Viewbot is able to increase viewership by more than 1000% your very first time using our service!</p>
    </div>
    
    <div class="top-plans">
    <p>Plans start at $15 a week and $40 a month!</p>
    </div>
    
    <div class="main-buttons">
        
    <form method="get" action="downloads/list.php">
        
    <button type="submit" class="btnop" style="text-align: center" id="downloadbutton">Download</button>
    
    </form>
    
    <form method="get" action="purchase">
        
	<button type="button" class="btnop" style="text-align: center" id="purchasebutton">Purchase</button>
	
	</form>
	
    </div>

</body>

【讨论】：

【解决方案3】：

你只需要添加这个css

.main-buttons form {
    display: inline;
}

【讨论】：

【解决方案4】：

还可以看看这个link，了解有关 flexbox 的所有信息。

.main-buttons{
    display: flex;
    flex-direction: row;
    justify-content: center;
 }

【讨论】：