Question

我有一个类似的html到一个波纹管（我使用外部样式表，但在这个例子中我不想让它更容易阅读）。＆＃34;更大＆＃34; div动态获取多行文本，而＆＃34;较小的＆＃34;总是只有一行。但是，我想要＆＃34;较小的＆＃34; div正好在＃34;更大的＆＃34;左侧的中间垂直对齐。 DIV。我不能使用display：table和display：table-cell，因为我使用jquery slidedown函数来显示＆＃34;包装器＆＃34; div和那迫使＆＃34;包装＆＃34;显示：块。如何做任何帮助将不胜感激。

<div class="wrapper">
    <div class="smaller"style="float: left; min-height: 100%;">
        <p style="vertical-align: middle;">Heading</p>
    </div>
    <div class="bigger" style="float: right;">
        <p>text1</p>
        <p>text2</p>
        <p>text3</p>
     </div>

</div>

Answer 1

请避免使用内联样式。你有课程，使用它们！也没有vertical-align:center。看看这里：

<强> HTML

<div class="wrapper">
    <div class="smaller">
        <p>Heading</p>
    </div>
    <div class="bigger">
        <p>text1</p>
        <p>text2</p>
        <p>text3</p>
     </div>

</div>

<强> CSS

.wrapper{
    display: table;
}

.smaller{
    min-height: 100%;
    display: table-cell;
    vertical-align: middle;
    width: 97%;
}
.bigger{
    height: 100px;
    display: table-cell;
}

您可以使用display:table和display:table-cell来实现此目的。

fiddle

Answer 2

您不希望.bigger浮动，因为.wrapper依赖于它的高度。尝试这样的事情fiddle。

如何使div填充外部div的整个高度并在中心垂直对齐？

2 个答案: