Как выровнять ввод без центрирования текста

Question

У меня есть одна проблема.

Мне нужна помощь, чтобы центрировать текст ввода и электронную почту, и эти два также должны быть рядом друг с другом.Также центрируйте флажок ввода ниже.

Это должно выглядеть так же, как text_box_newsletter.Это должно быть в центре.

Я застрял, попробовал все, так что теперь я только запутался.

Пожалуйста, помогите студенту :) спасибо большое!

.grid_newsletter .text {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 41px;
}

.grid_newsletter input {
  width: 380px;
}

.grid_newsletter .checkbox {
  margin-top:
}

.grid_newsletter input[type="checkbox"] {
  width: 22px;
  height: 22px;
  border: 2px solid black;
}

.grid_newsletter .text_box_newsletter {
  background: white;
  width: 495px;
  height: 90px;
  text-align: center;
  margin-top: 27px;
  margin-left: auto;
  margin-right: auto;
}

.grid_newsletter .text_box_newsletter p {
  padding-top: 39px;
  padding-bottom: 35px;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.100em;
}

<div class="grid_newsletter">
  <div class="padding">
    <div class="content">
      <div class="text">Newsletter</div>
      <form>
        <input type="text" name="firstname" placeholder="förnamn">
        <input type="email" name="email" placeholder="e-post">
      </form>
      <div class="checkbox"><input type="checkbox" name="confirm"> I confirm <a href="#">Read more</a></div>
      <div class="text_box_newsletter">
        <p>skicka</p>
      </div>
    </div>

Answer 1

Я использовал 2 flexboxes .

1. Столбец, содержащий поля ввода
2. Строка, содержащая флажок.Это также допускает выравнивание по вертикали, поэтому текст после флажка аккуратно выравнивается по центру флажка.

Кроме того, отсутствовали 2 закрывающих элемента.

.grid_newsletter .text {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 41px;
}

.grid_newsletter input {
  width: 380px;
}

.grid_newsletter .checkbox {
  margin-top:
}

.grid_newsletter input[type="checkbox"] {
  width: 22px;
  height: 22px;
  border: 2px solid black;
}

.grid_newsletter .text_box_newsletter {
  background: white;
  width: 495px;
  height: 90px;
  text-align: center;
  margin: 27px auto 0 auto;
}

.grid_newsletter .text_box_newsletter p {
  padding-top: 39px 0 35px 0;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.100em;
}


/* Added */

.grid_newsletter form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.grid_newsletter .checkbox {
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid_newsletter .checkbox a {
  margin: 0 0 0 0.5rem;
}

<div class="grid_newsletter">
  <div class="padding">
    <div class="content">
      <div class="text">Newsletter</div>
      <form>
        <input type="text" name="firstname" placeholder="förnamn">
        <input type="email" name="email" placeholder="e-post">
      </form>
      <div class="checkbox"><input type="checkbox" name="confirm"> I confirm <a href="#">Read more</a></div>
      <div class="text_box_newsletter">
        <p>skicka</p>
      </div>
    </div>
  </div>
  <!-- Added -->
</div>
<!-- Added -->

Answer 2

Вы можете сделать это так же, все поля должны быть выровнены по центру, лучше нацеливать div вместо целевых элементов.

.content { text-align: center; }

Answer 3

В форме вы можете использовать flexbox для выравнивания всех элементов:

.your-form-selector {
    display: flex;
    justify-content: center;
}

Я проверял это, и это работает, если я не понимаю вопрос.

Я стараюсь избегатьиспользование text-align для содержимого блока, так как это может нарушить работу скриптовых языков справа налево.Это не должно быть проблемой, если вы никогда не планируете расширять свой сайт.

Answer 4

Использование Flexbox - отличный способ сделать это, однако он не поддерживается в старых браузерах (Internet Explorer), поэтому следующее будет делать то же самое.

form input { display:block; margin:auto;}
.checkbox { text-align:center;}

Answer 5

Добавьте это к свойствам, и вы отсортированы:

form,.checkbox {
  text-align: center;
}