垂直和水平对齐字段集中的文本

Question

我确定这个问题已被问及很多次，但它并不好笑，但搜索后我找不到解决方案来解决我的问题。

我在一个php页面上有几个字段集，每个字段的内容都是从数据库中获取的一段文本。我想要将字段集中的文本垂直和水平对齐。水平部分很简单，显然文字对齐，但垂直对齐并不那么简单。

产生的HTML标记：

<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> 

下面是一个的jsfiddle我被打的链接，它剥离出来，以确保我没有其他地方冲突的所有额外无关CSS。

jsfiddle example

你可以看到文本只是坚持字段集的顶部。我已经试过把内部的容器和其他东西放在阳光下，但我一直在盯着这个问题很久，这对我来说已经没有意义了，所以我可能错过了一个简单的解决方案。

任何帮助将不胜感激，我打开任何方法，将文本移动！

如果需要更多信息，只需要问！

在此先感谢

Answer 1

可以行高设置为您的字段集类，所以：

 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/