Question

我试图将一个div垂直对齐到高度动态的相邻div。

我遇到的大多数方法都要求我知道父div的高度。但是如果你看到我的例子，那就是驱动整个部分高度的“正确”div。

我试图将div“left”中的文本垂直居中显示在右边的div上。 “父”div也没有固定的高度。

我怎么能这样做，理想情况下用CSS？

感谢。

我的例子：

http://jsfiddle.net/halogenmobile/McVAE/9/

Answer 1

有时候CSS的盒子模型不能用于此，所以你可以恢复到老式的桌面模型。（更不用说你必须调整你的标记）。

查看display: table，display: table-cell和vertical-align: middle。

我更新了小提琴：http://jsfiddle.net/McVAE/18/

Answer 2

您好，您可以像这样替换css中的一些属性

<强>的CSS

.parent{
    border: 1px solid red;
    padding: 2px;
    width: 500px;
    text-align: center;
    display: table;
}
.parent p.p1{
    font-size: 20px;
}
.left{
    display: table-cell;
    vertical-align: middle;
    border: 1px solid green;
    width: 30%;
}
.right{
    display: table-cell;
    border: 1px solid blue;
    width: 69%;
}

<强> HTML

<div class="parent">
    <div class="left">
        <p class="p1">Vertically</p>
        <p>Center me to the box on my right, please</p>
    </div>
    <div class="right">
        <p>I can be</p>
        <p>variable</p>
        <p>number</p>
        <p>of</p>
        <p>lines</p>
        <p>and I</p>
        <p>determine</p>
        <p>the height</p>
        <p>of everything</p>
        <p>here</p>

    </div>
</div>

Live Demo here http://jsfiddle.net/rohitazad/McVAE/73/

从另一个div垂直对齐到动态高度？

2 个答案: