Question

这是我的代码段：

HTML

<div class="app-cont">
    <div class="app-head">
        Additional Comments :
    </div>
    <div class="app-main">
        balallalalalallalalalala
        <br/>
        jaslnflkasnlsnlksanlknslnwkin
        <br />
        lknlkanfklnlk
    </div>
</div>

CSS：

div {
    color:white;
}
.app-cont {
    background: black;
    width: 90%;
    padding-top: 2.5px;
    padding-bottom: 2.5px;
    margin-bottom: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}
.app-head {
    background: #484848;
    width: 25%;
    margin-bottom: auto;
    display: inline-block;
    border-top-right-radius:2px;
    -moz-border-top-right-radius:2px;
    border-bottom-right-radius:2px;
    -moz-border-bottom-right-radius:2px;
}
.app-main {
    display: inline-block;
    text-align: justify;
}

demo

直到我没有在课程app-main的div上添加足够的内容。但是当我在div中添加足够的内容时，具有类app-head的div会到达底部。

虽然我想要它在中间。我怎么能这样做？

Answer 1

只需添加垂直对齐样式。

.app-head,.app-main{
    vertical-align:middle;
}

您可以在inline-block元素上使用它来定位在其他inline-block元素附近或inline元素附近。

Answer 2

嗯，我完全不确定目标是什么，但是如果我理解正确的话，你想在正文的中间保留阻止附加评论文本的块吗？

我已经更新了你的小提琴，看看我是否有你需要的解决方案：Updated Fiddle

我绝对定位.app-head，并使用顶部：50％和负边距使其保持垂直居中。你还必须给.app-cont一个相对位置才能工作，注释部分的左边距需要略大于.app-head的宽度。

无论如何，希望有所帮助！

Answer 3

我也做了一些其他改动..

http://jsfiddle.net/Ues8Q/4/

..但主要的想法是：

外部容器有：position: relative;

您想要居中的事情有：position: absolute; left: 0px; top: 50%; margin: -exactly half of the height of this element; height: whatever it is;

并要求您要居中的元素具有固定的高度......

css在其父级之间定位一个框

3 个答案: