Question

I’m trying to build a button in pure CSS and fail spectacularly at aligning different elements. This is probably easy, but I can’t get my head around it.
Here’s how it should look:

The button should contain both text and an image. Both should be vertically centered.
Both of them together should be horizontally centered.

I can get either of this to work on its own, but not both at the same time.

I’m really looking for some guidance as to what would be the best way of doing this, but here’s what I’m using so far, as simplified as possible for me:

<span style="display:table; text-align:center;">
<span style="display:table-cell; position:relative; ">
    <a href=… >
        <img style="position:absolute; top:50%; margin-top:-#{ height / 2}px"></img>
    </a>
</span>
    <a href=… > TEXT </a>
</span>

And this is the current result.

Note how the icon should be further to the right, and the text should be a little further to the right as well. My current understanding is that right now it’s dead center because using absolute alignment for the icon removes it from the flow.

(Some of the strange variables due to me generating the HTML via ERB.)

Answer 1

You could just use a button with some text an an image in it. Vertically align the contents of the button and add padding.

<button><span><img src="http://placehold.it/25x25">Some Text</span></button>​

button{
    padding: 1em 2em;
}
img, span{
    vertical-align:middle;
}

DEMO