Auto-centering of text in a div tag

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
HiddenS3crets
Forum Contributor
Posts: 119
Joined: Fri Apr 22, 2005 12:23 pm
Location: USA

Auto-centering of text in a div tag

Post by HiddenS3crets »

Is there a way to center text vertically in a fixed-width box?

What I have

Code: Select all

----------------------------------
|               text
|
|
----------------------------------
What I want

Code: Select all

----------------------------------
|
|                text
|
----------------------------------
I tried putting an auto margin, but that didn't work.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

Code: Select all

vertical-align: center;
?
HiddenS3crets
Forum Contributor
Posts: 119
Joined: Fri Apr 22, 2005 12:23 pm
Location: USA

Post by HiddenS3crets »

(doh! forgot about that property)

ertical align uses middle, not center.

Either way, it's not working
Last edited by HiddenS3crets on Sun Jul 01, 2007 7:15 pm, edited 1 time in total.
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

oops, not center.. it's middle
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Divs don't work like that. You're thinking tables. If it's only one line, you can use line-height:

Code: Select all

line-height: 2em; font-size: 1em;
Most people don't know this, but line height automatically centers text vertically.
HiddenS3crets
Forum Contributor
Posts: 119
Joined: Fri Apr 22, 2005 12:23 pm
Location: USA

Post by HiddenS3crets »

It can be any amount of lines.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

Then you'll have to give the div a table style, and use vertical-align. display: table-cell works in FF, but I don't know about IE.
HiddenS3crets
Forum Contributor
Posts: 119
Joined: Fri Apr 22, 2005 12:23 pm
Location: USA

Post by HiddenS3crets »

Yeah, I just saw an article that said the same thing, but that method doesn't seem to work.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

It's really not possible, but you shouldn't have much of a need for it. Just give it even padding on the top and bottom and be done with it.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

I believe you can put another div inside of it with the height set to an absolute value with auto margin top and bottoms. If you need the height to be variable, that may not work for you. You might also experiment with setting the height as a percentage.
User avatar
superdezign
DevNet Master
Posts: 4135
Joined: Sat Jan 20, 2007 11:06 pm

Post by superdezign »

astions wrote:I believe you can put another div inside of it with the height set to an absolute value with auto margin top and bottoms. If you need the height to be variable, that may not work for you. You might also experiment with setting the height as a percentage.
To clarify, the outer div has an set size, and the inner div has an auto margin. (nice suggestion :-D)
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

I don't really do design any more. That crap drives me crazy.
Post Reply