CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Sohil Shah
Sohil Shah

Reputation: 135

Div vertically align

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:

enter image description here

Please help me into this.

Upvotes: 1

Views: 57

Answers (3)

Joseph Khella
Joseph Khella

Reputation: 715

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%);
}

Upvotes: 0

Gust van de Wal
Gust van de Wal

Reputation: 5291

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

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

Upvotes: 2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

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;}

Upvotes: 3

Related Questions