Centering input inside bootstrap column - html

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>
None of the divs classes have any formatting except for the orange-container which has a 100% width and 80px height. I cant get the input to vertically center inside the blue-container2 Tried using vertical-align: middle and display:table-cell on blue-container to no effect.

Answer 1

Use flex box layout.
.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;
}
See it in action: https://jsfiddle.net/pcxdek1t/

Answer 2

Bootstrap provides a "text-center" class that you can apply by doing the following:
<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>

Answer 3

.orange-container {
display: flex;
align-items: center;
}
if use FlexBox, but you use Bootstrap3