CSS vertical centering...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

CSS vertical centering...

Post by alex.barylski »

There must be a way...no? Without using JS???

Without using fixed elements in height/width and hardcoding calculations...

Any ideas?
User avatar
Todd_Z
Forum Regular
Posts: 708
Joined: Thu Nov 25, 2004 9:53 pm
Location: U Michigan

Post by Todd_Z »

<td>'s....

:(
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

lol

Oooops...my bad amigo...I meant to mention....using DIV and CSS only :P

Sorry...
User avatar
shoebappa
Forum Contributor
Posts: 158
Joined: Mon Jul 11, 2005 9:14 pm
Location: Norfolk, VA

Post by shoebappa »

I usually set padding-top and padding-bottom to the same thing.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

depends on what you want centered... if you had a div with one line of text (a button for example), you can do:

Code: Select all

<style type="text/css">#moo{height:2em;line-height:2em;}</style>
<div id="moo">click for stuff</div>
Which would give you a 2em tall box, with 'click for stuff' vertically centered...
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Any contents inside a DIV...why would it matter what the content were? But yes, everything will be inside a DIV :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

There's some good solutions http://www.student.oulu.fi/~laurirai/www/css/middle/, http://www.456bereastreet.com/lab/centered/both/ and http://www.jakpsatweb.cz/css/css-vertic ... ution.html

Which method you choose depends on your specific situation. For single items (a few words for example) I normally use the line-height method, setting the line-height of the content to the height of the parent box (but that only works when the content is one line). In other situations you'll need some of the other methods.

But to be honest I've never had to use vertical centering on anything other then a few words. As content and browser windows tend to be very flexible on websites, it often doesn't make much sense. However, I don't know your specific situation, so can't talk for you ;)
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

Give your div the same line-height and height - simple as that.
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Oren wrote:Give your div the same line-height and height - simple as that.
Only if there is only one line of content...
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

True.
Post Reply