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高度的橙色容器外，没有任何div类具有任何格式。我无法将输入垂直居中置于blue-container2内，尝试使用vertical-align：middle和display：table-cell on blue-container无效。

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

Answer 2

Bootstrap提供了一个＆＃34;文本中心＆＃34;您可以通过执行以下操作来应用的类：

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

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

＆＃13;

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

＆＃13;

Answer 3

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

如果使用FlexBox，但使用Bootstrap3

在bootstrap列中居中输入

3 个答案: