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