Question

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

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

对于每个按钮，我得到内部跨度：

<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的顶部，而当我有一个很长的文本它按一行下降，因此文本从Button的中间（垂直）开始。

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

我尝试使用那些CSS，但没有任何作用：

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

Answer 1

要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;
}

使用短\长文本垂直对齐按钮中的文本

1 个答案: