Inline buttons with images in floats - button

Question

I've set up three divs as containers for my menu buttons. One will align buttons to the left side of the page, the other to the right, and the final one in the middle between both divs. This is what it looks like in CSS.
.actions {
#include clearfix();
.left {
float: left;
margin-left: $outside_margin;
height: $actions_height;
line-height: $actions_height;
}
.middle {
text-align: center;
margin-left: 0px auto;
margin-right: 0px auto;
height: $actions_height;
line-height: $actions_height;
}
.right {
float: right;
margin-right: $outside_margin;
height: $actions_height;
line-height: $actions_height;
}
}
This works quite well. Now I'm trying to write a .button class that will make a simple boxed button with a word of text in it and sometimes also an image. This is what my HTML looks like.
<div class="actions">
<div class="left">
<a class="button" href="#"><span class="text">Left</span><span class="image"></span></a>
</div>
<div class="right">
<a class="button" href="#"><span class="text">Left</span><span class="image"></span></a>
</div>
<div class="middle">
<a class="button" href="#"><span class="text">Left</span><span class="image"></span></a>
</div>
</div>
I have tried a bunch of things. I never got them to work properly with table-cells, display:block will require me to use floats again and I have no idea how to get a proper alignment on the middle one, and inline-blocks - aside from having that pesky space in between them when writing easily readable HTML - required a lot of tweaking to get right and that was only for one button size then.
I guess that I'm at the point where I am just lost because I've tried so many things but nothing worked right. So I thought I'd post my problem here.
What would be the best way to proceed with this project? Thanks in advance.

Answer 1

I created a prototype based on the following HTML:
<div class="actions">
<div class="left">
<a class="button" href="#">
<span class="text">Left</span><span class="image"><img src="http://placehold.it/30x30"></span></a>
</div>
<div class="right">
<a class="button" href="#">
<span class="text">Right</span><span class="image"><img src="http://placehold.it/30x30"></span></a>
</div>
<div class="middle">
<a class="button" href="#">
<span class="text">Middle</span><span class="image"><img src="http://placehold.it/30x30"></span>
</a>
</div>
</div>
and using the following CSS:
.actions {
outline: 1px dotted blue;
height: 30px;
line-height: 30px;
}
.actions a {
}
span.image img {
vertical-align: bottom;
}
span.text {
vertical-align: baseline;
}
.left {
float: left;
margin: 0 20px;
outline: inherit;
}
.middle {
display: block;
text-align: center;
margin-left: 0px auto;
margin-right: 0px auto;
outline: 1px dashed blue;;
overflow: hidden;
}
.right {
float: right;
margin: 0 20px;
outline: inherit;
}
I added some outline's so that we can visualize how far the blocks extend and how margins work and so on.
The left and right <div>'s are floated, nothing unusual and the the middle section is an inflow block with text-align: center and overflow: hidden, which is perhaps optional depending on other design considerations.
I put in some simple 30px by 30px images, but I am not sure what else you might need.
Hopefully this can get you started.
Fiddle Demo

Answer 2

It seems likely that the reason you couldn't get table-cell to "work" is because you didn't realize you needed to vertically align the contents of your cells as well as the cells themselves:
http://tinker.io/619bf/2
.actions {
display: table;
width: 100%;
}
.actions div {
display: table-cell;
border: 1px solid;
vertical-align: middle;
width: 33%
}
.actions div * {
vertical-align: middle;
}