Florin C. Florin C. - 1 year ago 65
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/


<div class="row">
<div class="col-lg-6">
<div class="panel panel-default">
<div class="panel-heading" id="comenzi-chart">
<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 class="select-chart-type">
<select class="form-control">


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


Answer Source

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


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