Div vertically align

Question

I have three <div> like this:

<div class="col-xs-12 col-md-4 ">
                    <img src="custom_images/logo3.png" />
                </div>
                <div class="col-xs-6 col-md-4 text-center">
                    <div class="input-group">
                        <input type="text" class="form-control header_search" placeholder="Search Here....." aria-describedby="basic-addon1">
                        <span class="input-group-addon search_span" id="basic-addon1" ><i class="fa fa-search "></i> </span>
                    </div>
                    <%--<div class="">
                        <input type="search" placeholder="Search Here...." />
                        <span style="background-color:#000;padding:10px;">
                            <img src="custom_images/search.png" /></span>
                    </div>--%>
                </div>
                <div class="col-xs-6 col-md-4 text-right">
                    <button class="cart_button"><span>Items in your cart</span> <span style="margin-left:25px;"><img src="custom_images/cart_item.png" /></span></button>
                    <span class="cart_items">15</span>

                </div>

I am not able to vertically align them in a line. I want all of them to be like vertically-align: middle.

Here is how it looks right now:

Please help me into this.

Possible duplicate of [vertical alignment of elements in a div](http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div) — Jivings, Oct 20 '15 at 11:59

score 3 · Answer 1 · answered Oct 20 '15 at 12:01

I believe that the logo is of fixed height. You can use margin-top on the top <div> using this:

<div class="col-xs-6 col-md-4 text-center adjust-top-height">
  <div class="input-group">
    <input type="text" class="form-control header_search" placeholder="Search Here....." aria-describedby="basic-addon1">
    <span class="input-group-addon search_span" id="basic-addon1" ><i class="fa fa-search "></i> </span>
  </div>
  <div class="">
    <input type="search" placeholder="Search Here...." />
    <span style="background-color:#000;padding:10px;">
      <img src="custom_images/search.png" /></span>
  </div>
</div>
<div class="col-xs-6 col-md-4 text-right adjust-top-height">
  <button class="cart_button"><span>Items in your cart</span> <span style="margin-left:25px;"><img src="custom_images/cart_item.png" /></span></button>
  <span class="cart_items">15</span>
</div>

And in the CSS

.adjust-top-height {margin-top: 15px;}

yea thanks...but i that is a kind of adjustment. i want it to be perfect even if the height of the logo changes in future. so i may not be worried about it.. — Sohil Shah, Oct 20 '15 at 12:17
@SohilShah Sure... Okay, then the accepted answer is perfect. `:)` — Praveen Kumar Purushothaman, Oct 20 '15 at 12:32

score 2 · Accepted Answer · answered Oct 20 '15 at 12:02

2

If you give the parent element the following CSS, you should be fine:

element{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

answered Oct 20 '15 at 12:02

Gust van de Wal

5,211
1
24
48

it worked fine....yet the editor shows that the properties are not valid css properties....may be this would be removed in future.... – Sohil Shah Oct 20 '15 at 12:18
Oh it won't be removed in the future. It is brand new, that's why the editor doesn't know the properties. It is valid, just new. – Gust van de Wal Oct 20 '15 at 13:40
using display flex creates problem for the responsive....it shows the horizontal scroll bar... – Sohil Shah Nov 03 '15 at 12:52
If you make a Fiddle, I can try and solve that for you – Gust van de Wal Nov 03 '15 at 13:03

score 0 · Answer 3 · answered Oct 20 '15 at 12:07

HTML:

<div class="header">    
    <div class="col-xs-12 col-md-4 header-element">
      <img src="custom_images/logo3.png" />
    </div>
    <div class="col-xs-6 col-md-4 text-center  header-element">
      <div class="input-group">
        <input type="text" class="form-control header_search" placeholder="Search Here....." aria-describedby="basic-addon1">
        <span class="input-group-addon search_span" id="basic-addon1"><i class="fa fa-search "></i> </span>
      </div>
    </div>
    <div class="col-xs-6 col-md-4 text-right">
      <button class="cart_button"><span>Items in your cart</span> <span style="margin-left:25px;"><img src="custom_images/cart_item.png" /></span></button>
      <span class="cart_items">15</span>

    </div>
</div>

CSS:

.header-element{
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Div vertically align

3 Answers3