Centering text vertically?

Freeway
1

I should know this, but I can’t remember the process. How do you center text vertically in a div?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

Have you tried setting the div height to flexible, and adding equal amounts of padding to top and bottom? That can often be the solution.

Regards
Derek

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

If you are trying to center text vertically within a fixed-height block, then this won’t do it, though. For anything that requires a rigid layout, you need to use something more exotic – or JavaScript – to level things out.

Walter

On May 4, 2014, at 6:21 AM, derekzinger wrote:

Have you tried setting the div height to flexible, and adding equal amounts of padding to top and bottom? That can often be the solution.

Regards
Derek

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

An example http://www.deltadesign.co/FW6Test/vertical-align-text.html

However this largely depends on other factors of your page construction/layout.

David

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

5

So a table is the only way I can do this?

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

So a table is the only way I can do this?

It is not actually a Table but the attribute display:table

And no there are other methods but it depends on other things like whether there is one line of text (or more)

An example page would help.

D

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

You can do this via CSS, the DIV which contains the text you needs to be centered vertically so you apply “display:table-cell” to this div. This DIV, however, needs a parent as well, to fake a table via “display:table”. Like this:

<div id="parent" style="display:table">
    <div id="child" style="display:table-cell; vertical-align: middle">
         Some text we want to have centered vertically
    </div>
</div>

That’s it.

Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options