SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jan 2003
    Location
    Las Vegas
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    vertical-align: ?

    Does that property even work? I've never been able to get it work. I would like to align text in the center of its parent DIV, like this...


    Code:
    #menu {
     background: #A0A0A0;
     height: 25px;
     voice-family: "\"}\"";
     voice-family: inherit;
     text-align: center;
     vertical-align: text-bottom;
     border-top: 1px solid #000000;
     border-bottom: 1px solid #000000;
     padding: .25em;
    }
    I have the menu ID attatched to a DIV tag, but the text inside the tag clings to the top of the block. Any idea why? (I've also tried variations of this code, like putting the vertical-align property on the text itself, and a few other things, but none work.)

  2. #2
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Nope, doesn't work on divs.

    However, baseline, top, middle, and bottom do work on tablecells (makes you cringe doesn't it )

    And it also should work on in-line elements, but as far as I can tell, only baseline, sub and super are suported by all 5+ browsers.

    For your reading pleasure:
    http://www.w3.org/TR/REC-CSS2/visude...vertical-align
    http://www.w3.org/TR/REC-CSS2/tables.html#height-layout
    http://style.webreview.com/webreview...stergrid.shtml

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  3. #3
    SitePoint Zealot
    Join Date
    Jan 2003
    Location
    Las Vegas
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Interesting, very helpful. Thanks Zoef!

    Kay, forgive me, but what's an in-line element? (Or should I just stop asking questions now and wait for my new CSS book to arrive and read through it... I found glish.com and started hacking at "The Holy Grail" layout (and that's where most of these questions arise, as I push the bounds of CSS (at least in my mind))... but more on that in another post...)

  4. #4
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Rabbit
    Interesting, very helpful. Thanks Zoef!

    Kay, forgive me, but what's an in-line element? (Or should I just stop asking questions now and wait for my new CSS book to arrive and read through it... I found glish.com and started hacking at "The Holy Grail" layout (and that's where most of these questions arise, as I push the bounds of CSS (at least in my mind))... but more on that in another post...)
    In-line elements are the oposite of block elements. Kinda hard to explain, can't think of the words right now, but very easy to show:
    Code:
    <h1 style="background-color:#eef">This is a block element</h1>
    <em style="background-color:#fee">This is an in-line element</em>
    <p style="background-color:#eef">And this is a block element
    with an <strong style="background-color:#fee">in-line element </strong>in it.</p>
    Get the picture?

    Never stop asking questions mate.

    And keep pushing...

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  5. #5
    SitePoint Zealot
    Join Date
    Jan 2003
    Location
    Las Vegas
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Zoef
    Never stop asking questions mate. [img]images/smilies/biggrin.gif[/img]

    And keep pushing...
    Wow! That made my day! YAY!

    So... a block element is an "outside" element, while an inline is an "inside" element? That's simple enough, and kind of what I had gathered... but... in your example, wouldn't the <p> also be inline?

    Your second block/inline example makes more sense to me, because they're nested. But the <h1> tag ends before the second tag is encountered... wouldn't they both be block elements?

    Do the different tags (the "weird ones," like DIV and SPAN (is there a diference between those two?)) have some sort of master heiarchy on one another in the world of CSS? Or, is there a preferred method over another (i.e. using div instead of span in case x, but span over div in case y?).

    ... If you assign attributes to the BODY tag via CSS, doesn't everything become an inline element? I heard somewhere (probably here) that certain tags can kill the inheritance when used in certain ways, is that true?

    Currently, I'm using a lot of DIVs to achieve my desired look... and, while it works, it doesn't quite feel right, know what I mean? I imagine I should be using a DIV to define an area on a page, where all the elements inside that area are related to one another in a relatively tight fashion, and then using the P tag when I intend on writing actual text, an IMG tag when I use an image, etc... Hmm... here's an example..

    The CSS:

    Code:
    #centercontent .dancerpreview {
     width: 80%;
     text-align: center;
     margin: 10px;
    }
    .dancerpreview .divdancergroup {
     float: left;
     width: 130px;
     height: auto;
     border: 1px solid #000000;
     margin: 10px;
    }
    .divdancergroup .girltext {
     background-color: #000000;
     color: #FFFFFF;
     padding: .5em;
     font-weight: bold;
    }
    .divdancergroup .imagearea {
     background-color: #FFFFFF;
     vertical=align: middle;
    }
    .divdancergroup .girlimage {
     border: 1px solid #000000;
     margin: 5px;
    }
    The HTML:

    Code:
      <div class="dancerpreview">
       <div class="divdancergroup">
      <div class="girltext"><a class="girllink" href="#">Girl Name</a></div>
      <div class="imagearea"><a href="#"><img  class="girlimage" src="images/girl01thumb.jpg" width="86" height="128" /></a></div>
      <div class="girltext"><a class="girllink" href="#">More of me...</a></div>
     </div>
     <div class="divdancergroup">
      <div class="girltext"><a class="girllink" href="#">Girl Name</a></div>
      <div class="imagearea"><a href="#"><img  class="girlimage" src="images/girl02thumb.jpg" width="73" height="128" /></a></div>
      <div class="girltext"><a class="girllink" href="#">More of me...</a></div>
     </div>
     <div class="divdancergroup">
      <div class="girltext"><a class="girllink" href="#">Girl Name</a></div>
      <div class="imagearea"><a href="#"><img  class="girlimage" src="images/girl03thumb.jpg" width="96" height="128" /></a></div>
      <div class="girltext"><a class="girllink" href="#">More of me...</a></div>
     </div>
      </div>
    The result (in IE 6):

    http://www.rabbitcreative.com/images/example.gif

    (the images are blurred so I don't offend anyone)

    Basically, it achieves the affect of tables, but without using tables... It also scales well with different browser sizes. In any event, everything is done in a DIV. So... The way I see it...

    Oh, real quick, I don't even know if how I defined those styles is legal. Not too long ago I posted about html>body #id, and while I got an answer... I dunno, things still aren't very clear. But I assume that I made children of the parent class "dancerpreview." Did I? Anyway...

    "dancerpreview" is the block element, while divdancergroup, divdancergroup, divdancergroup and girlimage are all its children (or inline elements?). Ah... yeah I'm confused. I dunno, all I know is that it looks good in IE, and @$$ in Netscape. Is there something critical I'm missing?

    Thanks again!

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,514
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Zoef
    Nope, doesn't work on divs.

    However, baseline, top, middle, and bottom do work on tablecells (makes you cringe doesn't it )
    Just to clear it up a bit, you are correct that vertical align doesn't work on divs but it was never meant to. Vertical-align determines the alignment of text within a single line of text or within a table cell.

    In a table cell the middle of the element will align with the middle of the cell.

    When used in a line of text vertical-align will position the text with respect to other text on the same line.

    This inline layout model is quite complicated but this is the basics of it: For each piece of text an inline box is generated, using the content area (box defined by font-size for each piece of text) and the half leading ((font size -line height)/2) to arrive at it's final height. These boxes will always be centred vertically with respect to each other within the line unless another value is applied to vertical-align.

    Perhaps an example would be easier to explain it:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Inline layout model</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    <!--
    .test {
     font-family: Arial, Helvetica, sans-serif;
     font-size: 20px;
    }
    .test span {
     font-size:12px;
     vertical-align:bottom
    }
    .test em {
     font-size:8px;
     vertical-align:top
    }
    -->
    </style>
    </head>
    <body>
    <div class="test">
    <p>Hello this is some text <span>This is some more text</span><em> and some more</em></p>
    </div>
    </body>
    </html>
    As Zoef mentioned some browers may not support all the values of vertical-align so testing is necessary.

    I know this doesn't help with the problem in hand but I thought it could do with explaining as vertical-align has been mentioned a number of times in other threads.

    Paul

  7. #7
    SitePoint Zealot
    Join Date
    Jan 2003
    Location
    Las Vegas
    Posts
    180
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That makes perfect sense. I still think it sucks, but at least now it makes sense. Thanks Paul.


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
  •