html - CSS 中的垂直对齐位置为 : absolute

Question

我有一些关于 CSS 文本对齐的问题，但我很难理解。我找到的关于通过 CSS 垂直对齐文本的最佳资源是:http://blog.themeforest.net/tutorials/vertical-centering-with-css/

我有一个 fiddle 演示了一些垂直对齐文本的方法，如果有人能快速回答我将不胜感激。

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

我很好奇为什么这个文本在 container2 的 child 中没有底部对齐，并且在 JSfiddle 中有 5 个快速问题。

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

Answer 1

我试着以我理解的方式回答你的问题。 但是，如果您有所需的图像结果，我们可以更轻松地为您提供代码或告诉您如何实现所需的结果。

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

希望这有帮助 =)