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

Question

我敢肯定，这个问题已经被问了很多遍了，只是不好笑，但是经过搜索，我找不到合适的解决方案。

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

产生的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示例

您会看到文本仅停留在字段集的顶部。 我曾尝试将一个内部div容器和其他所有东西放在阳光下，但是我一直盯着这个问题已经很久了，对我而言这不再有意义了，所以我可能缺少一个简单的解决方案。

任何帮助将不胜感激，我乐于接受任何会移动文本的方法！

如果需要更多信息，请询问！

提前致谢

Answer 1

您可以将线高设置为您的fieldset类，因此：

      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/