Vertical alignment in CSS with position: absolute

Question

I've got some questions about CSS text alignment that I am having some difficulty understanding. The best resource I've found about vertically aligning text via CSS is this: http://blog.themeforest.net/tutorials/vertical-centering-with-css/

I have a fiddle demonstrating some ways to vertically align text, and I'd appreciate if someone gave a quick answer.

http://jsfiddle.net/zSCJr/6/

I am curious why this text is not bottom aligned in container2's child, and have 5 quick questions in the JSfiddle.

HTML:

<div class="container container2">
    container2
    <div class="parent">
        parent
        <span class="child">
            child<br/>
            child
        </span>
    </div>
</div>

CSS:

.parent {
    border: 1px solid green;
    height: 50%;
}

.child {
    border: 1px solid red;
    vertical-align: bottom;
}

.container {
    border: 1px solid black;
    height: 150px;
    margin-bottom: 40px;
}

.container1 .parent, .container2 .parent {
    display: table;
}

.container1 .child, .container2 .child {
    display: table-cell;
}

.container2 {
    position: relative;
}

.container2 .parent {
    width: 100%;
}

.container2 .child {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
}

http://stackoverflow.com/questions/8896965/css-vertical-align-table-cell-dont-work-with-position-absolute — ITroubs, Jan 21 '14 at 22:19

score 0 · Accepted Answer · answered Jan 21 '14 at 22:49

I tried to reply at what I understand to your questions. However, if you have an image result of what you want, it will be easier to us to give you the code or tell you how to achieve what you want.

Here is the JSFIDDLE where I put your questions answer.

Questions
1) removing position: absolute from container2's child makes the text align to the bottom (as expected from vertical-align: bottom). why?
2) container3's  child,child,child span only gets clipped clipped by the first ancestor which has overflow:hidden AND position:something. why is position required?
3) container4's child does not stretch vertically unless position: absolute is set (position: relative will not do anything).
4) container4's child's height: 100% will use the first parent that has a position set. why not the first parent's content height?
5)container4's child has vertical-align: bottom set. But its text is not aligned to the bottom (unlike in container1 where parent has display: table and child has display: table-cell.

Answers

    1)
    On your css, you can reveiw that .container2 .child and .child css is applicated to your class, so removing only one vertical align on one class will still stick the table content to the bottom because .container2 .child is display as table cell

    2)
    I don't understand your question, what don't you don't understand?
    If you have an image result of what you want, I can code it and you will learned from it.


    3)
    Inside a table, everything is managed differently, you need to define how to display your content. You need to aply display: block to .container4 .child 

    4)
    Because you have the choice =)
    So set the parent position of the item that you want


    5)
    Because you forgot to add .container4 .parent {display: table;} and .container4 .child {display: table-cell;}

Hope this help =)

Vertical alignment in CSS with position: absolute

1 Answers1