Align center in Bootstrap 4 input-group-prepend

Question

I'd like a fixed width input-group-prepend that is larger than the content inside it, but I'd like the content to centered horizontally.

I've tried text-center and align-items-center, but it always seems to be left aligned.

How do I get the content to be in the middle of the 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

You need justify-content-center (https://getbootstrap.com/docs/4.2/utilities/flex/#justify-content) because the input-group-text is defined as a flexbox container with a row direction

.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>