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

Question

我有一个类似的HTML的一个波纹管（我使用外部样式表，但在这个例子中，我不想让它更容易阅读）。 “更大”的div动态获取多行文本，而“更小”总是只有一行。但是，我希望“较小”div中的文本垂直对齐“较大”div左侧的中间。我不能使用display：table和display：table-cell，因为我使用jquery slidedown函数来显示“wrapper”div，并强制“wrapper”为display：block。 任何帮助如何做到这一点，将不胜感激。

<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。