垂直对齐文本与短长文本按钮

Align vertically text in buttons with shortlong text

本文关键字：文本 按钮 对齐 垂直      更新时间：2023-09-26

我为手机构建了一个Web App，并试图在一行中显示2个Buttons，因此它们将垂直放置在屏幕的所有重量上。

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

因此，对于每个按钮，我得到inside span's:

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

我想在文本中支持3个点，所以对于长文本，它会下降到下一行，我添加了:

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

都工作得很好，但问题是，当我有短文本它垂直显示在按钮的顶部，而当我有一个长文本它下降了一行，结果文本从Button的中间(垂直)开始。

我怎么能解决它，所以即使是短文本，它将从垂直中间显示为长文本。

我试着使用那些CSS，但没有工作:

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

为display:table-cell工作，父级需要有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;
}
相关文章：