CSS中的垂直对齐位置：绝对

Question

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

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

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

我很好奇为什么这个文本在 container2 的孩子中没有底部对齐，并且在 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;}

希望这个帮助 =)