CSS text placed inside a div

Question

I am trying to achieve something and cannot do it.

I have a div with a fixed height and width. I want the text to be centered vertically.

so far I have managed to do this:

<div>
   <a>this is a long text</a>
</div>

and it will look like this

-------------
This is a long
    text
-------------

which is great

But if the line is not completed, it will look like

------------
This is short

-------------

.the-div
{
height:29px;
line-height:14px !important;
}

.the-a
{
font-size:12px;
}

I need this to be appreciated too!

I tried using linear height and playing with JS to figure out if it wraps or not, and then changes the line height accordingly

thanks for the help

Answer 1

try this example

http://jsfiddle.net/fcalderan/3HBC4/1/

Answer 2

.the-a
{
font-size:12px;
vertical-align: middle;
}

Answer 3

, div,

the-div
{
height:29px;
line-height:29px !important;
}

Answer 4

To be aligned vertically, you will need to use some display in the form of table hacks. This will allow you to use vertical-align:middle;, achieving what I look like.

Example

Answer 5

div a{
margin-top:auto;
margin-bottom:auto;
}