SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    center text vertically.....c'mon, it must be easy!

    Please forgive my newbie question: I want to vertically align some text in a div tag, how do I do it? I read the CSS2 documentation, and I am a little confused. I thought that what I should do is wrap my text in second div tag and set the div's vertical align property to "middle." Here's the code:

    Code:
    div.vcentered {
    	font: normal normal bold 12pt Arial;
    	height: 50px;
    	vertical-align: middle;
    }
    
    ...
    
    <div>
    	<div class="vcentered">Make me vertically centered!!</div>
    </div>
    I thought that this might do the trick but it doesn't. Any suggestions? The things I've read so far seem pretty convaluted.

    Thanks

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Unfortunately, your thread title couldn't be further from the truth. There currently is no easy way to achieve vertical centering with CSS, but this comes about as close as you're going to get.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thanks

    Thanks mattjacob. You're always posting good replies. In that case, do you know what the verticle-align property if for? I don't understand the W3C spec where it says "This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element." What's a "line box?"

  4. #4
    SitePoint Wizard
    Join Date
    Oct 2001
    Location
    Tucson, Arizona
    Posts
    1,858
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    OK, looking at the spec here, we see that vertical-align only applies to inline elements. This means that I've been going about it wrong for a while now, trying to apply this property to DIV and other block-level elements. D'oh!

    Well, this page is an example of how vertical-align is supposed to be used. It works, just not like I (and lots of other people) think it should.
    Last edited by mattjacob; Jun 14, 2002 at 12:17.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •