如何在html中将中间的两个按钮与一定的边距对齐答案

【问题标题】：How to align two buttons in the middle with a certain margin in html如何在html中将中间的两个按钮与一定的边距对齐
【发布时间】：2017-10-13 10:26:41
【问题描述】：

我试图在 HTML 中对齐屏幕中间的两个按钮。当我尝试使用 text-align: center; 时，它不起作用。下面是我的按钮代码。

<style>

.button {
      margin-top: 15px;
      background-color: #0066FF;
      border: none;
      color: white;
      padding: 10px 20px;
      text-align: center;
      text-decoration: none;
      display: inline-block;
      font-size: 16px;
      cursor: pointer;
 }

 <body>

 <div class="floated run">
 <form action="aboutus.html">
 <button class="button">See Projects</button>
 </form>
 </div>

 <div class="floated run">
 <form action="end.html">
 <button class="button">About Us</button>
 </form>
 </div>

 </body>

我知道这个问题有多个答案，但到目前为止没有一个对我有帮助。

【问题讨论】：

标签： html css button center

【解决方案1】：

您可以使用 Flexbox 来获取您想要的内容并稍微更改您的标记。

因此，您需要一个带有 .flex 类的包装器，以及带有 .flex-item 类的子类。

.flex {
  display: flex;
  justify-content: center;
}

.flex-item + .flex-item {
  margin-left: 10px;
}

.button {
  margin-top: 15px;
  background-color: #0066FF;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}

<div class="flex">
  <form action="aboutus.html" class="flex-item">
    <button class="button">See Projects</button>
  </form>

  <form action="end.html" class="flex-item">
    <button class="button">About Us</button>
  </form>
</div>

【讨论】：

非常感谢您的帮助，但由于某种原因，当我插入它时，它们在 div 应该去的按钮下方有一个巨大的空白

【解决方案2】：

这里的解决方案是，因为您在 div 和表单中拥有按钮，所以您直接应用于按钮的任何 CSS 都将不起作用 - 您需要先定位 div：

https://jsfiddle.net/o2gxgz9r/6967/

这个例子的本质是这个CSS：

.floated {
  width: 48%;
  float: left;
  padding: 1%;
}

.first {
  text-align: right;
}

使用此 HTML：

<div class="floated run first">
 <form action="aboutus.html">
 <button class="button">See Projects</button>
 </form>
 </div>

 <div class="floated run">
 <form action="end.html">
 <button class="button">About Us</button>
 </form>
 </div>

请注意，我在第一个 div 中添加了一个类 .first。

【讨论】：

感谢您的帮助。为什么他们的两个浮动类在上面？
因为我太仓促了。 :) 我已经编辑了答案。
非常感谢您的帮助。我将在我的代码上运行答案，然后将其标记为正确
作为记录，我认为在这种情况下没有理由需要 form 标签 - 按钮可以存在于表单之外，除非您计划添加搜索或输入元素。如果按钮位于单个 div 中，您最初的 text-align: center 解决方案很可能会起作用。
我想通了。你能把它输入到上面的问题中吗？将不胜感激

【解决方案3】：

您可以将按钮向左浮动，添加一点左边距，用div 包裹它，然后将其定位到中心：

<style>

    .button {
          margin-top: 15px;
          margin-left: 10px;
          background-color: #0066FF;
          border: none;
          color: white;
          padding: 10px 20px;
          text-align: center;
          text-decoration: none;
          float: left;
          font-size: 16px;
          cursor: pointer;
     }

     .button-wrapper{
          width: 55%;
          margin: 0 auto;
     }

 </style>
     <body>
     <div class="button-wrapper">
     <div class="floated run">
     <form action="aboutus.html">
     <button class="button">See Projects</button>
     </form>
     </div>

     <div class="floated run">
     <form action="end.html">
     <button class="button">About Us</button>
     </form>
     </div>
     </div>
     </body>

【讨论】：

【解决方案4】：

简单

给出一个 div.floated width:100% 和 text-align:center

检查 - div.floated { width:100%; text-align:center; }

【讨论】：