Vertical-align text in div

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?

 

just use padding-top : Xpx;

 

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