SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    how can i get the text vertical-align:middle

    hello
    how can i get the text vertical-align:middle

    HTML Code:
    <style>
        .Rapper { margin: 0 auto; border: solid 1px black; width: 500px; height: 500px; padding: 20px;}
    .left { display:inline-table; height: 50px; margin: 10px; border: solid 1px black; 
            padding:10px; vertical-align:middle;}
    /*
    span{position:relative;}
    span{position:relative;top:50%;margin-top:-0.5em;}*/
    
        </style>
    </head>
    <body>
    <div class="Rapper">
            <div class="left"><span> aaa <br /> xx</span></div>
            <div class="left">aaa</div>
            <div class="left">aaa</div>
        <br />
            <div class="left">aaa</div>
            <div class="left">aaa</div>
            <div class="left">aaa</div>
        <br/>
            <div class="left">aaa</div>
            <div class="left">aaa</div>
            <div class="left">aaa</div>
        <br />
    </div>
    </body>
    </html>

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi,
    You were close

    You need one more element with display:table-cell and vertical-align:middle

    Those rules can be applied to a <p> tag nested in the divs

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test Page</title>
     
    <style type="text/css">
    .wrap {
        width: 500px;
        min-height: 500px;
        margin: 0 auto;
        padding: 20px;
        border: 1px solid #000;
    }
    .wrap div {
        height: 50px;
        display: inline-table;
        vertical-align: middle;
        margin: 10px;
        padding: 10px;
        border: 1px solid #000;
    }
    .wrap div p {
        margin: 0;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }
    </style>
     
    </head>
    <body>
     
    <div class="wrap">
        <div><p>aaa<br>xx</p></div>
        <div><p>aaa</p></div>
        <div><p>aaa</p></div>
        <br>
        <div><p>aaa</p></div>
        <div><p>aaa<br>xx</p></div>
        <div><p>aaa</p></div>
        <br>
        <div><p>aaa<br>xx</p></div>
        <div><p>aaa</p></div>
        <div><p>aaa</p></div>
        <br>
    </div>
     
    </body>
    </html>

  3. #3
    SitePoint Member
    Join Date
    Mar 2010
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you chief


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
  •