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

Question

我已经建立了 bootstrap 接触，我希望从中将其所有元素居中对齐。下面是我的代码:

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

屏幕截图

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

谢谢

Answer 1

添加以下CSS

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