如何垂直对齐jQuery按钮文本？

Question

I've modifyed a bit the height of ui-button class but the text button remains at the bottom of it. How can I align it to the middle?

.ui-button {
   display: inline-block;
   position: relative;
   padding: 0px;
   margin-right: 0.1em;
   cursor: pointer;
   text-align: center;
   overflow: visible;
   // resize a bit the height
   height: 20px;
}

vertical-align didn't work.

http://jsfiddle.net/PM4T6/

Answer 1

.ui-button {line-height：20px;}

Answer 2

当使用position一定要指定top left ， bottom right ....

Answer 3

try this

.ui-button {
   display: table-cell;
   position: relative;
   padding: 0px;
   margin-right: 0.1em;
   cursor: pointer;
   text-align: center;
   overflow: visible;
   height: 50px;
}