Смещенный и центральный контейнер с начальной загрузкой

Question

Я пытаюсь центрировать заголовок и поле ввода с помощью начальной загрузки. Я не могу получить поле ввода по центру с заголовком. Если у кого-то есть лучший способ сделать это, дайте мне знать.

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h1 class="display-4 text-center">Weight Converter</h1>
      <form>
        <div class="form-group">
          <input
            id="lbsInput"
            type="number"
            class="form-control form-control-lg"
            placeholder="Enter Weight..."
          />
        </div>
      </form>
      <div id="output">
        <div class="card">
          <div class="card-block">
            <h4>Grams:</h4>
            <div id="gramsOutput"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

у вас есть неполный HTML и нет CSS. Но в зависимости от того, что у вас есть, простой margin: auto; в CSS должен центрировать этот элемент для вас.

Если вы хотите больше контроля, вы должны посмотреть на flexbox. отправьте больше кода, и вы получите больше помощи.

РЕДАКТИРОВАТЬ: спасибо за код: это работает для центрирования ввода. Я только что проверил это. дайте мне знать, если вам нужна дополнительная помощь. ура

<div class="container">
    <div class="row">
      <div class="col-md-6">
        <h1 class="display-4 text-center">Weight Converter</h1>
        <form>
          <div class="form-group" id="centerParent">
            <input
              id="lbsInput"
              type="number"
              class="form-control form-control-lg"
              placeholder="Enter Weight..."
            />
          </div>
        </form>
        <div id="output">
          <div class="card">
            <div class="card-block">
              <h4>Grams:</h4>
              <div id="gramsOutput"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>


<style>

#centerParent {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

</style>