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!

please post sample code if you can. it would also be useful to see the css of the container. If the container has known or unknown height, and if the contained div has known or unknown height, that will determine which approach to take to solve your problem. — BumbleB2na, Jan 12 '12 at 18:34
try specifying a line-height (if it's only one line of text). Or I think doing something like 'display:table-cell' or something like that works, but not sure if it's fully cross-browser (and old-browser) compatible — Rodolfo, Jan 12 '12 at 18:35
I'd say use vertical-align:top but without seeing what you're doing that may not be the right answer. — j08691, Jan 12 '12 at 18:36
Look at this thread: http://stackoverflow.com/questions/8828249/center-div-within-a-div I'm adding text within the right div now. — Ibanez, Jan 12 '12 at 18:40

Einar Ólafsson · Accepted Answer · 2015-09-01T03:05:13.887

6

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;

edited Sep 01 '15 at 03:05

answered Jan 12 '12 at 19:29

Einar Ólafsson

3,036
1
19
24

I guess that's one way to work around. If my div height is 90px and I have two lines of text, then setting line height to 45px puts each line at 25% and 75% down respectively. What if I don't want the two lines of text spread that far apart? Thanks! – Ibanez Jan 12 '12 at 20:27
That's true, that can be a problem – Einar Ólafsson Jan 13 '12 at 01:42

score 0 · Answer 2 · answered Jan 12 '12 at 19:03

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

Vertically Align Text Within Floating Div

2 Answers2