SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I vertically align text inside a <div> tag when using float?

    Hello;

    Can somebody tell me how to vertically align the text in the <div class="One"> tag below so that it is positioned at the middle point of the image to the right?

    The way it is below the Jane Doe<br>News Reporter<br>XYZ News Company aligns at the left, the image aligns at the right, and the text or news article starts below both. That part is working the way it needs to work.

    The problem is the Jane Doe<br>News Reporter<br>XYZ News Company is aligning at the top of the image. I need for it to be vertically centered at the middle of the image.

    You can copy and paste the code below and see what I'm talking about.

    PHP Code:
    <html>
    <
    head>

    <
    style type="text/css">
                            
    div.One                 
    {                           
    floatleft;                

                              
    div.Two                 
    {                           
    floatright;               
    }  
                             
    .
    Two img                
    {                           
    displayblock;             
    }                           
                                
    div.Three            
    {                           
    clearboth;                
    }                           

    </
    style>

    </
    head>
    <!--   -->
    <
    body>

    <
    div class="One">
        
    Jane Doe<br>
        
    News Reporter<br>
        
    XYZ News Company
    </div>

    <
    div class="Two">
    <
    img class="thumb" src="" width="70" height="150">
    </
    div>


    <
    div class="Three">
    Mary had a little lambIts fleece was white as snow.
        </
    div>


    </
    body>
    </
    html
    I appreciate the help.
    .

  2. #2
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can a setting like "div.one{margin-top:50px}" be of use?
    Happy ADD/ADHD with Asperger's

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

    If you are talking about automatically vertically centering elements of unknown height then it gets a little complicated but I have an example here that shows how to do this:

    http://www.pmob.co.uk/temp/vert-align-textandimage.htm

    Here is your code revised as per my demoe:

    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">
    p{margin:0;}
    .wrap{
        width:500px;
        border:1px solid #000;
        overflow:hidden;
        display:table;
    }
    .one{                                   
        display:table-cell;
        vertical-align:middle;
    } 
    .two {                           
    float: right; 
    width:70px;
    height:150px;
    background:red              
    }  
    .two img {
    display: block;             
    }                           
    .three {                           
    clear: both;                
    }                           
    
    </style>
    <!--[if IE ]>
    <style type="text/css">
    .one{    
        float:left;
        position:relative;
        top:50&#37;;
    }
    .one p{
        position:relative;
        top:-50%;
        width:14em;/* ie needs a width here*/
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div class="wrap">
        <div class="one">
            <p>Jane Doe<br />
                News Reporter<br />
                XYZ News Company</p>
        </div>
        <p class="two"><img class="thumb" src="" width="70" height="150"></p>
    </div>
    <p class="three"> Mary had a little lamb. Its fleece was white as snow. </p>
    </body>
    </html>
    Good browsers get display:table and display:table-cell which allows vertical-align:middle top work on the contents just like a table would.

    IE doesn't understand display:table but it thinks that if you position a parent 50% down the page with relative positioning and then shift the child back up the page by 50% (again with relative positioning), the it has the effect of perfectly centering the contents. Other browsers would have just moved the element back to where it started .

  4. #4
    SitePoint Addict Volitics's Avatar
    Join Date
    Aug 2003
    Location
    US
    Posts
    280
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    erik.j, Paul O'B,

    Thanks for responding to my problem. I appreciate the help.

    Gosh, that example is complicated. But it works great, though! I wasn't sure what I was wanting to do could be done.

    Thanks again for the help.
    .


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
  •