Центрирование ввода с помощью CSS и начальной загрузки 4

Question

У меня есть форма, которую я хочу центрировать на странице.Ярлыки центрированы, но по какой-то причине я не могу центрировать ввод с помощью класса управления формой.

Сейчас он выглядит так ...

[РЕДАКТИРОВАТЬ: display: block; внутри формы управления вызывает проблему.Не уверен, почему, как я могу отключить его]

#centered {
  text-align: center;
}

<div id='centered'>
          <span class="form-group">
            <h5 class="label">Email</h5>
            <input class="form-control" id="ex2" type="text">
          </span>
        <span class="form-group">
          <h5 class="label">Name</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <span class="form-group">
          <h5 class="label">Create A Password</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <span class="form-group">
          <h5 class="label">Confirm Password</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <input class="form-group-check-input" type="checkbox" value="" id="confirm_terms"> <strong>Agree to terms</strong>
  </div>

Answer 1

Используйте класс mx-auto

/* CSS used here will be applied after bootstrap.css */
#centered {
  text-align: center;
  width:100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div id='centered' class="mx-auto">
          <span class="form-group">
            <h5 class="label">Email</h5>
            <input class="form-control" id="ex2" type="text">
          </span>
        <span class="form-group">
          <h5 class="label">Name</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <span class="form-group">
          <h5 class="label">Create A Password</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <span class="form-group">
          <h5 class="label">Confirm Password</h5>
          <input class="form-control" id="ex2" type="text">
        </span>
        <input class="form-group-check-input" type="checkbox" value="" id="confirm_terms"> <strong>Agree to terms</strong>
  </div>

Answer 2

Вы можете попытаться изменить свойство display всех form-control внутри этого div:

 #centered .form-control {
  display: inline;
}