Кнопка не выравнивается по центру в форме начальной загрузки

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

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

Answer 2

Добавить класс начальной загрузки 'text-center'.пожалуйста, обратитесь к приведенному ниже коду.

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

, если бы вы могли предоставить работающему jsfiddle весь ваш код, это помогло бы. Однако, насколько я вижу, вашу проблему можно решить, поместив всю вашу форму в контейнер с классом text-center.

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

Answer 4

Ваша кнопка не выровнена, потому что ваша кнопка фактически является входом. Все элементы центрированы, потому что у них есть margin: auto (поэтому оставшееся пространство равномерно распределяется между двумя полями). Но входные элементы (и элементы с классом btn из bootstrap) являются inline-block, а свойства left и right margin не работают с элементами inline-inline-block.

Одним из вариантов является тот, который metaDesign предлагает. Другой вариант - явно установить свойство отображения кнопки на display: block.

так что-то вроде:

input.btn {
  display:block;
}