Question

我正在尝试创建一些表单元素并使输入在列中垂直对齐。我尝试使用vertical-align:middle;和margin:auto 0;，但似乎都不起作用。

input {
  vertical-align:middle;
  margin:auto 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-9">
      <div class="form-group">
          <div class="row">
            <label for="phonenum" class="col-sm-2">Enter your phone number</label>
            <div class="col-sm-10">
                <input type="text" name="phonenum" />
            </div>
          </div>
      </div>
    </div>
  </div>
</div>

Answer 1

我不确定这是否是您要查找的内容，但是如果您希望元素垂直居中，则可以使用align-items-center类的Bootstrap，因为它的行上使用了flexbox

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-sm-9">
      <div class="form-group">
        <div class="row align-items-center">
          <label for="phonenum" class="col-sm-2">Enter your phone number</label>
          <div class="col-sm-10">
            <input type="text" name="phonenum" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

无法获得输入以在Bootstrap 4列内垂直居中对齐

1 个答案: