CODEWITHSUNDEEP
csshtml
diehell
diehell

Reputation: 759

How do i center this div vertically?

http://jsfiddle.net/fretwiz/LuShM/

I have a divs stack on top of each other, and inside those divs there's two inline-block divs. One div with 80% width i floated to the left and the other one width 20% just take the right side.

I wanted to make the right div center vertically, the parent row divs may dynamically resize according to the content of the floated div.

Is there a solution other than using tables?

<div id="container">
    <div id="content-wrapper">
        <div id="publication_date">21 October 2014</div>
        <div id="title">Curie-Cancer and DNA Therapeutics partner in the fight against cancers that resist conventional therapies</div>
    </div>
    <div id="bookmark">
        <img src="http://lorempixel.com/output/abstract-q-g-30-30-4.jpg" />
    </div>
</div>
<div id="container">
    <div id="content-wrapper">
        <div id="publication_date">21 October 2014</div>
        <div id="title">Curie-Cancer and DNA Therapeutics partner in the fight against cancers that resist conventional therapies</div>
    </div>
    <div id="bookmark">
        <img src="http://lorempixel.com/output/abstract-q-g-30-30-4.jpg" />
    </div>
</div>

Upvotes: 1

Views: 70

Answers (3)

user3559752
user3559752

Reputation:

You can do it without using tables, Try this with CSS :

#container {
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 30px;
    overflow: hidden;
    height: 100%;
    position: relative;
}

#content-wrapper {
    width: 80%;
    float: left;
}

#bookmark {
    position: absolute;
    width: 20%;
    text-align: center;
    right: 0;
    top: 50%;
    -ms-transform:translateY(-50%); /* IE 9 */
    -webkit-transform:translateY(-50%); /* Chrome, Safari, Opera */
    transform:translateY(-50%); /* Standard syntax */
}

Demo

Hope this will help you ...

Upvotes: 1

codefreaK
codefreaK

Reputation: 3662

Is this what you want check the demo

This is the most simple and straight forward way to do this just add display:table and table-cell to container and content wrapper,bookmark

Css

#container {
    border-bottom: 1px solid #ebebeb;
    padding-bottom: 30px;
    overflow: hidden;
    height: 100%;
    display:table;
   }
    #content-wrapper {
        display: table-cell;
        width: 100%;
        float: left;
    }



   #bookmark {
    width: 20%;
    display: table-cell;   
    vertical-align:middle;
    text-align:center;
    }

Output

Output

Upvotes: 1

derek_duncan
derek_duncan

Reputation: 1377

Can you sacrifice the display: inline-block; on the bookmark? If so, try adjusting the css;

http://jsfiddle.net/LuShM/3/

#container {
    display: table;
    /*previous styles*/
}
#bookmark {
    /*previous styles*/
    display: table-cell;
    vertical-align: middle;
}

Upvotes: 0

Related Questions