Align vertically text in buttons with short\long text

Question

I building an Web App for mobiles and trying to show 2 Buttons in one row, so they will be placed vertically on all over the weight of the screen.

<a href="#" data-role="button" style="float:right;">BTN1</a>
<a href="#" data-role="button" style="float:right;">BTN2</a>

As a result for each button I getting insides span's :

<span class="ui-btn-inner ui-btn-corner-all" style="height: 60px;">
    <span class="ui-btn-text">BTN1</span>
</span>

I want to support 3 points with text so it will get down to next line for long text, I added:

.ui-btn-text { 
    white-space: normal !important;
}

all works good but the problem is when I have short text it displayed vertically on the top of the Button, while when I have a long text It get down by a line and as a result the text start from the middle (vertically) of Button .

How can I fix it so even for short text It will be shown from the vertically middle as for long text.

I tried using those CSS but nothing works:

display: table-cell;
vertical-align: middle;
line-height: normal;

Answer 1

for display:table-cell to work, the parent needs to have display:table

.ui-btn-inner{
   display:table;
    background:#ccc;

}
.ui-btn-text { 
    white-space: normal !important;
    display: table-cell;
vertical-align: middle;
line-height: normal;
}