如何在Bootstrap 3中将一个div与另一个对齐？

Question

I have the following html. My label is not aligned vertically in the center compare to the input field.

<div class="row">
    <div class="col-sm-5">
        <label for="investmentbalance" class="control-label pull-right">Investment Balance</label>
    </div>
    <div class="col-sm-2">
        <input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance">
    </div>
</div>

How can I set both input and label have the same height ?

JSFiddle

https://jsfiddle.net/mLcrv19z/

Answer 1

You can use both padding or line-height .

Add to label :

padding: 7px;

or:

line-height: 34px;

The input height is 20px; the padding 6 and the margin 1. So here's the calculation:

padding : 6 + 1 = 7px

line-height : 20 + 7 (top) + 7 (bottom) = 34px

Answer 2

To get the two elements (label and input) to align vertically, try using the form-inline class, along with form-group . Here's what that looks like:

<div class="form-inline">
        <div class="form-group">
            <label for="investmentbalance">Investment Balance</label>
            <input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance" />
        </div>
</div>

https://jsfiddle.net/mLcrv19z/10/

Answer 3

You may use margin-top:3%; to the label CSS

The value is based on the jsfiddle example. It may change depending on the application you are developing.

Answer 4

Issue is not with your alignment but the classes you have defined. You need to define bootstrap grid class for every width. Otherwise grid would appear different in different resolutions. Check this out.

<div class="col-sm-10 col-md-10 col-xs-10">

<div class="col-sm-2 col-md-2 col-xs-2">

Fiddle Solution

Answer 5

Another solution is to use a custom class, setting it's line-height equal to the parent's height and aligning it in the middle.

 .middle { vertical-align: middle; line-height: 34px; } 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container-fluid"> <div class="row middle"> <div class="col-xs-5"> <label for="investmentbalance" class="control-label pull-right">Investment Balance</label> </div> <div class="col-xs-7"> <input type="text" readonly="readonly" value="28500.00" class="form-control" name="investmentbalance" id="investmentbalance"> </div> </div> </div>