如何在 html 中以一定的边距对齐中间的两个按钮

Question

我试图在 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>

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

Answer 1

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

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 后添加了一个 class .first。

Answer 2

您可以将按钮向左浮动，添加一点左边距，用一个 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>

Answer 3

您可以只使用 Flexbox 来获得您想要的并稍微更改您的标记。

所以你需要一个 .flex class 和 children 以及 .flex-item classes.

的包装器

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

Answer 4

简单

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

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

如何在 html 中以一定的边距对齐中间的两个按钮

How to align two buttons in the middle with a certain margin in html

html

css

center

button