Как выровнять флажки

Question

Это код, который у меня есть. Я хочу, чтобы два флажка были друг над другом, но также были выровнены. В настоящее время, когда код запускается, флажки появляются полностью слева от экрана и, кажется, не хотят центрироваться, даже когда я использую justify-content: center.

Пожалуйста, помогите и поблагодарите -вы!

  <input name="change" type="checkbox" value="Borrow Time">Borrow Time</label>
  <label><input name="change" type="checkbox" value="No Cigs">No Cigs </label>

label{
  display: inline-block;
  width: 180px;
}

Answer 1

Используйте как приведенный ниже фрагмент кода:

.flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
}
label {
    display: inline-block;
    width: 123px;
}

<div class="flex-container">
   <label>
   <input 
          name="change"
          type="checkbox"
          value="Borrow Time">Borrow Time</label>
  <label>
    <input 
           name="change"
           type="checkbox"
           value="No Cigs">No Cigs 
  </label>
  </div>

Answer 2

Это то, что вы ожидаете?

.flex-container {
 display: flex;
 justify-content: center;
}
.inner-flex-container {
 display: flex;
 flex-direction: column;
}

<div class="flex-container">
<div class="inner-flex-container">
<label>
  <input name="change" type="checkbox" value="Borrow Time">Borrow Time</label>
<label>
  <input name="change" type="checkbox" value="No Cigs">No Cigs
</label>
</div>
</div>

Пояснение

justify-content: center; работает только с flex box, вы должны использовать display: flex на том же элементе на работу justify-content: center;

Если вы наблюдали приведенный выше пример, я обернул label и checkbox в 2 div, потому что один должен центрироваться горизонтально, а другой - сверху друг друга.

Я могу сделать это с одним div, но если ваш контент / дочерний элемент не одинаковы по длине, то это будет выглядеть как пример ниже

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

<div class="flex-container">
<label>
  <input name="change" type="checkbox" value="Borrow Time">Borrow Time</label>
<label>
  <input name="change" type="checkbox" value="No Cigs">No Cigs
</label>
</div>

Примечание: если вы используете flex-direction: column, align-items используется для центрирования по горизонтали вместо justify-content, потому что Вы изменили направление по умолчанию row на column Подробнее здесь и здесь