Question

我目前正在尝试将两个按钮居中并显示它们，以使第一个按钮向左浮动，而另一个按钮在所有这些按钮都居中时都在第一个按钮的另一侧水平显示。

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

这就是我所拥有的：

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>

Answer 1

在display: flex;上使用display: inline;代替.main-buttons 和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>

Answer 2

<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>

Answer 3

也请看一下link，其中包含有关flexbox的所有信息。

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

Answer 4

您只需要添加此CSS

.main-buttons form {
    display: inline;
}

如何在使两个按钮保持水平居中居中的同时使两个按钮相邻？

4 个答案: