Выровнять центр в Bootstrap 4 input-group-prepend

Question

Мне бы хотелось, чтобы фиксированная ширина input-group-prepend была больше, чем содержимое внутри него, но я бы хотела, чтобы содержимое было отцентрировано по горизонтали.

Я пробовал text-center и align-items-center, но всегда кажется, что он выровнен по левому краю.

Как сделать так, чтобы содержимое находилось в середине input-group-text?

.input-group-text {
 min-width: 60px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">$</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Value">
  </div>
</div>

Answer 1

Вам необходимо justify-content-center (https://getbootstrap.com/docs/4.2/utilities/flex/#justify-content), поскольку input-group-text определяется как контейнер flexbox с направлением строки

.input-group-text {
 min-width: 60px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group">
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text justify-content-center">$</div>
    </div>
    <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Value">
  </div>
</div>