Javascript 将按钮中的文本与短\长文本垂直对齐

我为手机构建了一个

Web应用程序

，并尝试在一行中显示2个

按钮

，因此它们将垂直放置在整个屏幕上

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

所有这些都很好，但问题是当我有短文本时，它会垂直显示在按钮顶部，而当我有长文本时 它向下移动一行，因此文本从

按钮的中间（垂直方向）开始

我如何修复它，即使是短文本，它也会从垂直中间显示为长文本

我尝试过使用那些
CSS
，但没有任何效果：

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

要使
display:table单元格
工作，父级需要有
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;
}

要使“显示：表格”单元格正常工作，父单元格需要具有“显示：表格”
display: table-cell;
vertical-align: middle;
line-height: normal;

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

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