JavaScript and client side scripting.
Moderator: General Moderators
HiddenS3crets
Forum Contributor
Posts: 119 Joined: Fri Apr 22, 2005 12:23 pm
Location: USA
Post
by HiddenS3crets » Sun Jul 01, 2007 7:04 pm
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.
HiddenS3crets
Forum Contributor
Posts: 119 Joined: Fri Apr 22, 2005 12:23 pm
Location: USA
Post
by HiddenS3crets » Sun Jul 01, 2007 7:12 pm
(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.
superdezign
DevNet Master
Posts: 4135 Joined: Sat Jan 20, 2007 11:06 pm
Post
by superdezign » Sun Jul 01, 2007 7:14 pm
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.
HiddenS3crets
Forum Contributor
Posts: 119 Joined: Fri Apr 22, 2005 12:23 pm
Location: USA
Post
by HiddenS3crets » Sun Jul 01, 2007 7:16 pm
It can be any amount of lines.
superdezign
DevNet Master
Posts: 4135 Joined: Sat Jan 20, 2007 11:06 pm
Post
by superdezign » Sun Jul 01, 2007 7:21 pm
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 » Sun Jul 01, 2007 7:27 pm
Yeah, I just saw an article that said the same thing, but that method doesn't seem to work.
superdezign
DevNet Master
Posts: 4135 Joined: Sat Jan 20, 2007 11:06 pm
Post
by superdezign » Sun Jul 01, 2007 7:30 pm
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.
Benjamin
Site Administrator
Posts: 6935 Joined: Sun May 19, 2002 10:24 pm
Post
by Benjamin » Sun Jul 01, 2007 7:54 pm
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.
superdezign
DevNet Master
Posts: 4135 Joined: Sat Jan 20, 2007 11:06 pm
Post
by superdezign » Sun Jul 01, 2007 8:08 pm
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
)
Benjamin
Site Administrator
Posts: 6935 Joined: Sun May 19, 2002 10:24 pm
Post
by Benjamin » Sun Jul 01, 2007 8:30 pm
I don't really do design any more. That crap drives me crazy.