Page 1 of 1
Auto-centering of text in a div tag
Posted: Sun Jul 01, 2007 7:04 pm
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.
Posted: Sun Jul 01, 2007 7:09 pm
by John Cartwright
Posted: Sun Jul 01, 2007 7:12 pm
by HiddenS3crets
(doh! forgot about that property)
ertical align uses middle, not center.
Either way, it's not working
Posted: Sun Jul 01, 2007 7:13 pm
by John Cartwright
oops, not center.. it's middle
Posted: Sun Jul 01, 2007 7:14 pm
by superdezign
Divs don't work like that. You're thinking tables. If it's only one line, you can use line-height:
Most people don't know this, but line height automatically centers text vertically.
Posted: Sun Jul 01, 2007 7:16 pm
by HiddenS3crets
It can be any amount of lines.
Posted: Sun Jul 01, 2007 7:21 pm
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.
Posted: Sun Jul 01, 2007 7:27 pm
by HiddenS3crets
Yeah, I just saw an article that said the same thing, but that method doesn't seem to work.
Posted: Sun Jul 01, 2007 7:30 pm
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.
Posted: Sun Jul 01, 2007 7:54 pm
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.
Posted: Sun Jul 01, 2007 8:08 pm
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

)
Posted: Sun Jul 01, 2007 8:30 pm
by Benjamin
I don't really do design any more. That crap drives me crazy.