Florin C. Florin C. - 7 months ago 18
HTML Question

bootstrap multiple floated divs vertically centered

I have a bootstrap panel and in it's heading I have a heading title which should go to the left and a select as well as a date range input which should go on the right of the panel heading vertically aligned in the middle. This is what I managed to do so far, the problem is the select item which is not vertically aligned.

enter image description here

Here is my code in a fiddle https://jsfiddle.net/prxbl/5ca3xo0b/8/

HTML

<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading" id="comenzi-chart">
Heading
<div class="input-daterange input-group" id="datepicker">
<input type="text" class="input-sm form-control" name="start" />
<span class="input-group-addon">to</span>
<input type="text" class="input-sm form-control" name="end" />
</div>
<div class="select-chart-type">
<select class="form-control">
<option>Daily</option>
<option>Weekly</option>
<option>Monthly</option>
</select>
</div>
</div>
</div>
</div>
</div>


CSS

.input-daterange {
width: 250px;
bottom: 5px;
float: right;
}

.select-chart-type {
padding-right: 10px;
float: right;
}

.select-chart-type select {
padding: 5px 10px;
height: 30px;
}


I am probably taking the wrong approach here so feel free to suggest the right way to do this. In the end I would like to be able to insert buttons/selects/inputs/ in this panel heading and they should all follow each other, float right and be vertically aligned in the middle.

Thanks!

Answer

Use margin-top: -5px; on .select-chart-type this class..

OR

Use position: relative;bottom: 5px; on .select-chart-type this class..