javascript - 如何在div中使用top middle和center

Question

我在另一个容器中有一个容器，我想使用三个部分。一个元素在顶部，一个元素在中间，一个元素在底部。

谁能帮我弄清楚如何设置这些元素的样式以正确显示？

http://jsfiddle.net/WSFnX/877/

这是 HTML 代码:

<div class='main'>
    <div class='outer'>
        <div class='inner'>
            <b>header</b>
            <hr/>
            <h3>Middle Text</h3>
            <img src="http://dummyimage.com/50x50/f0f/fff"/>
        </div>
    </div>
</div>

和 CSS:

.main {
    background: #ccc;
    width: 900px;
    height: 600px;
    padding: 50px;
}

.outer {
    border: 1px solid #ccc;
    width: 800px;
    height: 500px;
    border-radius: 5px;
    margin: 10px auto;
    background: #fafafa;
}

.inner {
    border: 1px solid #ccc;
    width: 400px;
    height: 300px;
    margin: 50px auto;
    background: #fff;
    text-align: center;
    position: relative;
}

.inner b {
    font-size: 0.65em;
    text-align: center;
}

.inner hr {
    margin: 0;
    padding: 0;
}

Answer 1

你想要这样的东西吗？

http://jsfiddle.net/6tE7k/

您可以更改这些:

min-height:500px;
min-height:100px;

到你需要的任何高度。

如果全屏查看它，您会发现它是一个 div 容器中的一个 div 容器。嵌套的 div 设置为 1024px。