how to center ui icon in jquery ui button

Question

I'm looking for a way to create toolbar buttons uisng jquery ui.

I tried to create button using

<div id='menubar_home' style='vertical-align: middle;width: 20px; height: 20px;'>
</div>

and using

$('#menubar_home').button({
    icons: { primary: "ui-icon-home" }
});

But image in button is not centered:

How to center image in button ?

Answer 1

#menubar_home {
    display:table-cell;
    vertical-align: middle;
    text-align: center;
}