Вертикально и горизонтально выровнять текст в наборе полей

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

Вы можете увидеть, что текст просто прилипает к верхней части полей. Я попытался поставить внутренний контейнер 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/