Vertically and horizontally align text in a fieldset

Question

I'm sure this question has been asked so many times its just not funny but having searched I can't find a solution that fixes my problem just right.

I have several fieldsets on a php page, the content of each one will be a block of text taken from a database. I want to align the text inside the fieldset both vertically and horizontally. The horizontal part is simple with text-align obviously but the vertical alignment is not so simple.

The resulting HTML markup:

    <div class="s_container3">
<a href="custom.php?page=19">
    <fieldset class="services_title2">
        Some Short Text
    </fieldset>
</a>
<a href="custom.php?page=18">
    <fieldset class="services_title2">
        More Short Text
    </fieldset>
</a>
<a href="custom.php?page=20">
    <fieldset class="services_title2">
        Some long text that spills onto the second line
    </fieldset>
</a>
<a href="custom.php?page=21">
    <fieldset class="services_title2">
        More short text again
    </fieldset>
</a>
<span class="stretch"></span>
</div>  

Below is a link to a jsfiddle I was playing with, it has all extra unrelated CSS stripped out to make sure I didn't have a conflict elsewhere.

jsfiddle example

You can see that the text just sticks to the top of the fieldset. I have tried putting an inner div container and everything else under the sun but I've been staring at this problem for so long it just isn't making sense to me anymore so I'm probably missing a simple solution.

Any help would be greatly appreciated, I'm open to any approach that'll move the text!

If anymore information is needed just ask!

Thanks in advance

Answer 1

You can set line height to your fieldset class, so:

      html, body { 
height:100%; 
}

        div { 
margin-left:auto; 
margin-right:auto; 
margin-top:0px;
margin-bottom:0px; 
}

        div.s_container3 { 
width:570px; 
text-align:justify; 
}
fieldset.services_title2 { 
    border:none; 
    font-size:1.3em; 
    width:215px; 
    min-height:45px; 
    vertical-align:middle; 
    text-align:center; 
    color:#ffffff; 
    background-color:#1c86b5; 
    margin-top:10px; 
    margin-left:auto; 
    margin-right:auto; 
    display:inline; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -khtml-border-radius: 10px;
     border-radius: 10px; 
    line-height: 45px;
    }

        .stretch { 
width:100%; 
display:inline-block; 
font-size:0; 
line-height:0; 
}
        a { 
text-decoration:none; 
}

http://jsfiddle.net/5H6Lf/