按钮未以自举形式居中对齐

Question

我进行了自举接触，从中我想将其所有元素对齐在中心。 下面是我的代码：

    .third-section > form > input{

         width: 35%;
         margin: auto;
         margin-top: 25px; 
    }

    .third-section > form > textarea{
     
        width: 35%;
        margin:auto;
        margin-top: 20px; 
    }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <section class="third-section">
      
      <form>

          <input type="text" class="form-control" placeholder="Name" required/>

          <input type="email" class="form-control" placeholder="Email" required/>

          <textarea id="message" rows="4" class="form-control" placeholder="Message" required></textarea>

          <input type="submit" class="btn btn-primary" value="SUBMIT"/>

      </form>

    </section> 

SCREENSHOT

如屏幕截图所示，按钮未居中对齐。请让我知道如何获得所需的布局。任何帮助将不胜感激。

谢谢

Answer 1

添加以下CSS

1af55d000000000000
1d4da5000000000000
48e027000000000000
2a148d000000000000
255d4c000000000000

Answer 2

如果您可以提供一个包含所有代码的有效jsfiddle，那将有所帮助。但是，据我所知，可以通过将所有表单都放在带有text-center类的容器中来解决您的问题。

<div class="container text-center">
...
</div>

Answer 3

添加引导程序类“文本中心”。请参考下面的代码。

<section class="third-section text-center">
  <form>
      <input type="text" class="form-control" placeholder="Name" required/>

      <input type="email" class="form-control" placeholder="Email" required/>

      <textarea id="message" rows="4" class="form-control" placeholder="Message" required></textarea>

      <input type="submit" class="btn btn-primary" value="SUBMIT"/>
  </form></section>

Answer 4

您的按钮未对齐，因为您的按钮实际上是输入。所有元素都居中，因为它们有边距：自动（因此剩余空间在两个边距之间平均分配）。但是输入元素（以及引导程序中带有btn类的元素）是内联块，并且行内左右属性对内联和内联块元素不起作用。

一个选项是metaDesign推荐的选项。另一种选择是将按钮的显示属性显式设置为display: block。

类似：

input.btn {
  display:block;
}