Верстка кнопок одинаковой высоты

[artwalek]

Необходимо сверстать 4 кнопки одинаковой высоты в столбик с помощью CSS3. Блок, в котором находятся кнопки ограничены по ширине.

Проблема возникает, когда текст кнопки не вмещается в заданную ширину и переносит текст.

Необходимо, чтобы надписи на кнопках были центрированы по вертикали (по горизонтали тоже) при заданной высоте, т. е. чтобы если текст кнопки переносится на другую строку, высота при этом не увеличивалась.

Делаю так. В моём примере высота увеличивается.

<ul>
<li><a href="" class="button"><span>Текст</span></a></li>
<li><a href="" class="button"><span>Текст</span></a></li>
<li><a href="" class="button"><span>Длинный текст</span></a></li>
<li><a href="" class="button"><span>Очень длинный текст</span></a></li>
</ul>

ul li {
display: inline;
}

.button {
    text-decoration: none;
    font-size: 1.2em;
    display: inline-block;
    text-align: center;
	color: #424043;
	text-shadow: 0px 1px 0px #ebe8e3;
	box-shadow: 0 0 .3em rgba(0,0,0,0.4);
    -moz-box-shadow: 0 0 .3em rgba(0,0,0,0.4);
    -webkit-box-shadow: 0 0 .3em rgba(0,0,0,0.4);
    width: 100%;

}

.button span {
    display: block;
    padding: 17% 0 17% 0;
    vertical-align: middle;
}

Edited September 18, 2012 by artwalek