Page 1 of 1
CSS vertical centering...
Posted: Sun Oct 29, 2006 5:43 pm
by alex.barylski
There must be a way...no? Without using JS???
Without using fixed elements in height/width and hardcoding calculations...
Any ideas?
Posted: Sun Oct 29, 2006 6:18 pm
by Todd_Z
<td>'s....

Posted: Sun Oct 29, 2006 6:32 pm
by alex.barylski
lol
Oooops...my bad amigo...I meant to mention....using DIV and CSS only
Sorry...
Posted: Sun Oct 29, 2006 6:52 pm
by shoebappa
I usually set padding-top and padding-bottom to the same thing.
Posted: Sun Oct 29, 2006 7:23 pm
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...
Posted: Sun Oct 29, 2006 7:25 pm
by alex.barylski
Any contents inside a DIV...why would it matter what the content were? But yes, everything will be inside a DIV

Posted: Mon Oct 30, 2006 12:18 am
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

Posted: Mon Oct 30, 2006 1:13 pm
by Oren
Give your div the same line-height and height - simple as that.
Posted: Mon Oct 30, 2006 2:17 pm
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...
Posted: Mon Oct 30, 2006 2:39 pm
by Oren
True.