html - 在 bootstrap 列中居中输入

Question

<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% 宽度和 80px 高度的 orange-container 之外，所有 div 类都没有任何格式。我无法让输入在 blue-container2 内垂直居中尝试使用 vertical-align: middle 和 display:table-cell on blue-container 无效。

Answer 1

使用 flex 盒子布局。

.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/