CSS Tip: Centering HTML Button Content

This tip shows how to nicely center HTML button content vertically. You may be familiar with the HTML button tag, which allows you to create nice HTML form buttons. For example, you can create buttons containing an icon, like this:

But if you don't do anything special, depending on the font used, the text won't be correctly aligned with the image:

So how do you fix it? It's easy once you know it. The trick is to first surround your text inside the button with an HTML span element:

<button type="button">
    <img src="save.gif">
    <span>Label</span>
</button>

Then use the following CSS rules:

button img { vertical-align: middle }
button span { vertical-align: middle }

With Orbeon Forms, this tip also applies to the xforms:submit and xforms:trigger elements:

<xforms:trigger>
    <xforms:label>
        <xhtml:img src="save.gif"/>
        <xhtml:span>Label</xhtml:span>
    </xforms:label>
</xforms:trigger>

With Orbeon Forms, you can further refine the CSS as follows:

button.xforms-trigger img { vertical-align: middle }
button.xforms-trigger span { vertical-align: middle }

The result is nicely vertically centered content, whatever the font size used: