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