SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    runat="server" Golgotha's Avatar
    Join Date
    Nov 2001
    Location
    Colorado
    Posts
    2,085
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    vertical-align: middle in a div

    Code:
     
    div.footer {
    	  height: 40px;
    	  width: 100%;
    	  padding: 0;
    	  font-family: verdana, helvetica, sans-serif;
    	  font-size: 11px;
    	  text-align: center;
    	  vertical-align: middle;
    	  color: #ffcc33;
    	  background-color: #51585E;
    	  position: absolute bottom;
    	  z-index: 2;
       }
    how come vertical-align: middle; does not work in a div?

    what's the solution?

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    vertical-align only works in inline content and table cells. The property is supposed to represent how text of two different sizes should align relative to each other on the same line. To emulate this in block-level content, just add padding to your <div>, like so:
    Code:
    div.footer { 
    height: 11px; 
    width: 100%; 
    padding: 15px 0; 
    font-family: verdana, helvetica, sans-serif; 
    font-size: 11px; 
    text-align: center;  
    color: #ffcc33; 
    background-color: #51585E; 
    position: absolute bottom; 
    z-index: 2; 
    }
    This will give you a ~41px tall footer with your text neatly arranged in the center of the <div>.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    As Vinnie said vertical-align only works in a single line (or a table cell).

    A quick (& dirty) fix if you have jsut a couple of words you want centred , would be to set your line-height to the same size as your div (i.e. 40px) then vertical-align:middle will align the text in the middle of the single line which is now 40px.

    Code:
    div.footer {
       height: 40px;
       line-height:40px;
       width: 100%;
       padding: 0;
       font-family: verdana, helvetica, sans-serif;
       font-size: 11px;
       text-align: center;
       vertical-align: middle;
       color: #ffcc33;
       background-color: #51585E;
       position: absolute bottom;
       z-index: 2;
       }
    (Line height can be buggy in older browers but I thought I'd point it out anyway. )

    Paul

  4. #4
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Golgotha
    how come vertical-align: middle; does not work in a div?
    You have the solution above, so I get to do the irony post: It does work in a div!

    http://www.w3schools.com/css/pr_pos_vertical-align.asp

    Douglas
    Hello World

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    Hi Doug,

    That w3c page isn't very clear and is probably the reason that everybody is trying to vertical-align elements within their containers .

    Just to clear it up for everybody else :Vertical-align does work in a div but it only vertically aligns text (and images) that are within the same single line. It aligns those inline elements with respect to themselves basically using the largest element in the line as the basis for the line height.

    In short Vertical align determines the alignment of text (or image) within a single line or within a table cell.

    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>
    Hope that makes sense as this does seem to crop up time and again.

    Paul

  6. #6
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B
    That w3c page isn't very clear and is probably the reason that everybody is trying to vertical-align elements within their containers
    I get the impression that people in general don't look at anything, w3c or not (in this case not), rather going only by the name of the property.

    I'm not really surprised when people don't notice that it is vertical align in a line

    <rant>
    Why don't people look these things up?

    A search for vertical-align gives, as the first restult, a list of possible values, all aligning themselves up and down like your example. The next result is the one I posted. The third is the sec itself, which I think is the clearest, as long as you know what an "anonymous inline box" is, which most people probably don't

    This property affects the vertical positioning inside a line box of the boxes generated by an inline-level element. The following values only have meaning with respect to a parent inline-level element, or to a parent block-level element, if that element generates anonymous inline boxes; they have no effect if no such parent exists.
    The next gives a roundup of support across browsers from NN4 upwards, and then another 15,000 pages talking about vertical-align and css... I mean, it's not hard to find, and when you see that something doesn't work in any browser, you've got to question you definition of "working" don't you??
    </rant>

    Anyway, hope that's all sorted,
    Douglas
    Hello World

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,802
    Mentioned
    158 Post(s)
    Tagged
    4 Thread(s)
    <rant>
    Why don't people look these things up?
    Then you'd have nothing to do Doug

    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
  •