Vertically Align Text Within Floating Div

Question

I have a div right floating within another div container. Within the right floating div I'm displaying text (date / time). How do I vertically align the text without using top padding? When I use top padding it moves my div down and then it's no longer center within the container. Thanks!

Answer 1

In your css try using line-height on your container. Use the same value in your line-height as in the height of your container. That should vertically align you text.

If the div is height:50px; than add line-height:50px;

Answer 2

Here is an example that adds a floating DIV to the right and centers the text in it vertically and horizontally.

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

The trick here is to set the line-height of the element to be the full height of its container.

<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;
}