CODEWITHSUNDEEP
htmlcss
Or Weinberger
Or Weinberger

Reputation: 7472

Vertical align text in child div

I'm trying to vertically align the text in the child div to the bottom of the parent div box.

http://jsfiddle.net/sUS8D/

Can anyone assist?

Thanks,

Upvotes: 1

Views: 2326

Answers (3)

Christian
Christian

Reputation: 28124

You can also use:

.child {
    display: table-cell;
    vertical-align: middle;
}

I kind of prefer this one over complicated CSS hacks (Sarfraz - let's be honest, even if the dev looking at your code was born doing CSS would need to read it twice).

Of course, there are cross-browser implications. You decide whether you want to debug a two-liner or a jungle of CSS rules.

Upvotes: 2

andyb
andyb

Reputation: 43823

@Sarfraz got there first so my fix got saved as revision 4 http://jsfiddle.net/sUS8D/4/ (minus the float)

Upvotes: 1

Sarfraz
Sarfraz

Reputation: 382746

Check out the DEMO

You need to adjust your CSS like this:

.parent {
    float:left;
    width:200px;
    height:400px;
    border: solid 1px;   
    position:relative;
}

.child {
    vertical-align:bottom;
    bottom:0;
    position:absolute;
    right:0;
}

Upvotes: 2

Related Questions