html - 按钮未在引导形式中居中对齐

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> 

截屏

如屏幕截图所示，按钮未在中心对齐。有人请告诉我如何获得所需的布局。任何帮助，将不胜感激。

谢谢

标签： htmlcssbootstrap-4

Answer 1

添加以下 CSS

.third-section > form {
  text-align: center;
}