垂直对齐浮动Div中的文本

Question

我有一个div右浮在另一个div容器中。在右浮动div中，我正在显示文本（日期/时间）。如何在不使用顶部填充的情况下垂直对齐文本？当我使用顶部填充时，它会向下移动我的div，然后它不再位于容器中心。谢谢！

Answer 1

在你的css中尝试在容器上使用line-height。在行高中使用与容器高度相同的值。这应该垂直对齐你的文字。

如果div为height:50px;而不是添加line-height:50px;

Answer 2

这是一个向右添加浮动DIV并将文本垂直和水平居中的示例。

http://jsfiddle.net/johnpapa/pUr6T/

这里的技巧是将元素的行高设置为其容器的整个高度。

<div id="outerDiv">
    <div id="rightFloatingDiv">
        <p>Hello</p>
    </div>
    <p>Lorem ipsum dumsome Lorem ipsum dumsome Lorem ipsum </p>
</div>

#outerDiv{
    width:400px;
    height:400px;
    background:#EEAAEE;
}
#rightFloatingDiv{
    width:100px;
    height:100px;
    line-height:100px;
    background:#EEEEEE;
    float:right;
}
#rightFloatingDiv > p{
    width: 100%;
    height: 100%;
    line-height:inherit;
    background:yellow;
    vertical-align:middle;
    text-align:center;
}