SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    John 8:24 JREAM's Avatar
    Join Date
    Sep 2007
    Location
    Florida
    Posts
    1,508
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    vertical align text, inside div

    Is there a way?

    div - span style text-align: vertical [text here] - /span - /div

    doesnt want to work

  2. #2
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the vertical-align property i believe only aligns inline elements like text, images, and form elements TO EACH OTHER. i too would like to know how to center something vertically.
    Steve Davis

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

    If you want to align some text that isn't going to wrap then you simply set the line-height to the same height as the div and it will sit in the centre automatically.

    e.g.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    *{margin:0;padding:0}
    .test{
        width:200px;
        height:200px;
        line-height:200px;
        text-align:center;
        margin:200px;
        border:1px solid #000;
    }
    </style>
    </head>
    <body>
    <div class="test">
        <p>I'm in the center!</p>
    </div>
    </body>
    </html>
    I have some other methods in some very old demos here and here for vertical centering also.

  4. #4
    SitePoint Addict
    Join Date
    Sep 2001
    Posts
    320
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    cool. so is that how u line up form elements too? by setting them all with the same line height?

    and what if u want to vertically center a block of text? or an image?
    Steve Davis

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, in theory you could set the relative position of the DIV's container, then position that DIV absolutely (top left both zero), then set the top and left negative margins to half the height and width of the container, but the code for that wouldn't be pretty.

    Or maybe I'm thinking of something else entirely while trying to update Windows on this PC (had to do a clean install on a new hard drive).

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by cranium
    cool. so is that how u line up form elements too? by setting them all with the same line height?
    No you would use vertical align in this case as they are all inline elements (although some browsers can be awkward with this of course).

    and what if u want to vertically center a block of text? or an image?
    They are covered in the links I have shown above.

    Or some other methods here:
    http://www.pmob.co.uk/temp/vertical-align-examples.htm
    http://www.pmob.co.uk/temp/vertical-align11.htm
    http://www.pmob.co.uk/temp/vertical-align3.htm

    There is also an entry in the faq on centering


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
  •