html - How to set all buttons in a controlgroup to the same height when some have two-row labels?

Question

I want to create a row of multiple buttons to form a coherent block in jQuery Mobile. For this, I placed them in a horizontal controlgroup. This approach works well for simple labels, but now I want to have one or more buttons with two rows of text on them. For example:

<form>
<fieldset data-role="controlgroup" data-type="horizontal">  
  <a href="#" data-role="button" data-icon="minus" data-iconpos="left">Left</a>
  <a href="#" data-role="button">Middle item<br/><sub>Second row</sub></a>
  <a href="#" data-role="button" data-icon="plus" data-iconpos="right"></a>
</fieldset>
</form>

Example on jsfiddle.

My problem is that the multi-row labels appear fine, but the other buttons on the row still have a width appropriate for a single-row label (or no label). The result looks like this:

How can I ...

• make all the buttons have the same height?
• center the one-row button labels vertically to the new height?
• center the icons vertically?

Answer 1

你可以试试这个：

• 第一步：为您分配一个ID<fieldset>

  <fieldset data-role="controlgroup" data-type="horizontal" id="t">
  

• 第二步：更改a标签的CSS

   #t a {
    float:none;
    display:table-cell;
    vertical-align:middle;
   }
  

查看演示http://jsfiddle.net/4qKkf/12/

Answer 2

这可以使用display: table-cell;允许您为链接提供统一高度并允许垂直居中的技巧来完成vertical-align

CSS：

a[data-role] {
    display: table-cell; 
    float: none;
    vertical-align: middle;
}

示例：http: //jsfiddle.net/4qKkf/14/