CSS vertical centering...
Moderator: General Moderators
-
alex.barylski
- DevNet Evangelist
- Posts: 6267
- Joined: Tue Dec 21, 2004 5:00 pm
- Location: Winnipeg
CSS vertical centering...
There must be a way...no? Without using JS???
Without using fixed elements in height/width and hardcoding calculations...
Any ideas?
Without using fixed elements in height/width and hardcoding calculations...
Any ideas?
-
alex.barylski
- DevNet Evangelist
- Posts: 6267
- Joined: Tue Dec 21, 2004 5:00 pm
- Location: Winnipeg
-
nickvd
- DevNet Resident
- Posts: 1027
- Joined: Thu Mar 10, 2005 5:27 pm
- Location: Southern Ontario
- Contact:
depends on what you want centered... if you had a div with one line of text (a button for example), you can do:
Which would give you a 2em tall box, with 'click for stuff' vertically centered...
Code: Select all
<style type="text/css">#moo{height:2em;line-height:2em;}</style>
<div id="moo">click for stuff</div>-
alex.barylski
- DevNet Evangelist
- Posts: 6267
- Joined: Tue Dec 21, 2004 5:00 pm
- Location: Winnipeg
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
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