1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.
  2. Better Analytics for WordPress Get It Free

Vertical-align text in div

Discussion in 'CSS' started by Kasper Rasmussen, Jun 20, 2006.

  1. #1
    I have been having a little problem for some time now. I am building my website in xhtml/css and therefore I use div's alot. Now I have a div with some text in it. The div is set to be 25 px high, that is very important. Problem is that the text shows up in the top of the div and I want it to be in the middle of the div.

    
    <div style="height: 25px;">
        Text
    </div>
    
    HTML:
    Anyone know what to do?
     
    Kasper Rasmussen, Jun 20, 2006 IP
  2. iatbm

    iatbm Prominent Member

    Messages:
    5,157
    Likes Received:
    353
    Best Answers:
    0
    Trophy Points:
    310
    #2
    just use padding-top : Xpx;
     
    iatbm, Jun 20, 2006 IP
  3. kk5st

    kk5st Well-Known Member

    Messages:
    3,040
    Likes Received:
    243
    Best Answers:
    12
    Trophy Points:
    190
    #3
    That appears to be a rather non-semantic markup. What is the text?

    If you're simply aligning a single line of text, make its line-height equal the height of its container.

    If you're (more semantically correct) trying to vertically center a block element within the containing div, it's still fairly straight forward except for IE's non-support of css2.
    
        <div class="outer">
          <div class="inner">
            <div class="mid">
              <img src="bullseye.jpg"
                   alt="a bullseye" />
    
              <p>and some text</p>
            </div><!-- end mid -->
          </div><!-- end inner -->
        </div><!-- end outer -->
    ================
    .outer {
        position: relative;
        display: table;
        vertical-align: middle;
        height: 300px;
        width: 300px;
        margin: 25px auto 0;
        border: 1px solid black;
        }
    
    .inner {
        position: relative;
        display: table-cell;
        vertical-align: middle;
        width: 100%;
        }
    
    .mid {
        border: 1px dashed silver; /*for clarity*/
        }
    
    /*Now the hack for obsolete browsers-ok, just IE*/
    /* \*/
    * html .inner {
        top: 50%;
        left: 0;
        }
    
    * html .inner .mid {
        position: relative;
        top: -50%;
        }
    /* */
    Code (markup):
    The html and the css would be much simpler if you didn't need to support obsolete browsers like IE.

    cheers,

    gary
     
    kk5st, Jun 20, 2006 IP