在引导列内居中输入答案

【问题标题】：Centering input inside bootstrap column在引导列内居中输入
【发布时间】：2017-06-15 23:54:48
【问题描述】：

<form class="form-horizontal">
    <div class="form-group orange-container">

    <div class="col-sm-4">
        <h4 class="black-container"> Title </h4>
        <div class="black-container2"> What do you want to raise money for? </div>
    </div>

    <div class="col-sm-8 blue-container2">
        <input type="email" class="form-control black-container3" id="email" placeholder="Enter email">
    </div>
</div>

除了具有 100% 宽度和 80 像素高度的橙色容器之外，没有任何 div 类具有任何格式。我无法将输入垂直居中放置在 blue-container2 内尝试使用 vertical-align: middle 和 display:table-cell on blue-container 无效。

【问题讨论】：

“我无法让输入在蓝色容器 2 内垂直居中”你是什么意思？它的高度是auto，所以它不会比它内部的输入高 - 那么输入将如何垂直对齐？该 div 需要高于输入才能使输入甚至具有垂直对齐的空间。
@MichaelCoker 忘了提，但 blue-container2 的高度是其父级的 100%，输入不是 100%
这是您在提问时应该包含所有相关代码的原因之一。理想情况下，您应该创建一个minimal, complete, verifiable example。

标签： html css twitter-bootstrap

【解决方案1】：

使用弹性盒布局。

.vertical-align {
  display: flex;
  flex-direction: row;
}

.vertical-align > .col-sm-8,
.vertical-align > .col-sm-8 {
  display: flex;
  align-items: center;
  justify-content: center; 
}

查看实际操作：https://jsfiddle.net/pcxdek1t/

【讨论】：

【解决方案2】：

.orange-container {
  display: flex;
  align-items: center;
}

如果使用 FlexBox，但你使用 Bootstrap3

【讨论】：

【解决方案3】：

Bootstrap 提供了一个“文本中心”类，您可以通过执行以下操作来应用它：

<div class="col-sm-4 text-center">

http://getbootstrap.com/css/#type-alignment

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<form class="form-horizontal">
    <div class="form-group orange-container">

    <div class="col-sm-4 text-center">
        <h4 class="black-container"> Title </h4>
        <div class="black-container2"> What do you want to raise money for? </div>
    </div>

    <div class="col-sm-8 blue-container2">
        <input type="email" class="form-control black-container3" id="email" placeholder="Enter email">
    </div>
      
    </div>
  </form>

【讨论】：