how to vertical align jQuery button text?

Question

I've modifyed a bit the height of ui-buttonclass 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

try this

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

Answer 2

When using position be sure to specify top left, bottom right....

Answer 3

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