Center Button caption vertically

I was looking for a clean way to vertically align the caption in a button to the center for buttons that are bigger than normal (e.g. using setHeight(3, Units.EM)). The easiest way to do that seems to be to add display: table; to the .v-button class (or your custom added style class) and then

display: table-cell;
vertical-align: middle;

[/code] to the .v-button-wrap class inside the .v-button element.

My questions:

  1. is there a better/easier way to do this? Are there any drawbacks to this approach?
  2. why aren’t vertically centered button captions the default? Big buttons with the caption at the top really don’t look good. I ready that the above approach doesn’t work in IE7, but Vaadin 7 has dropped support for that, so…


Actually, the approach above is broken. What seems to work better is to add display: table; height: 100%; to the .v-button-wrap element inside the .v-button element, and then display: table-cell; vertical-align: middle to the .v-button-caption element inside that .v-button-wrap element.