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>

在Bootstrap 4 input-group-prepend

1 个答案: