Center contents of fluid middle div in three column layout - css

Question

I cannot for the life of me get the contents of the center div to align no matter what I try:
HTML
<div class="content-controls">
<div class="content-controls-left">
123
</div>
<div class="content-controls-middle">
<img src="logo.png">
</div>
<div class="content-controls-right">
456
</div>
</div>
CSS
.content-controls {
width:100%;
}
.content-controls-left {
float:left;
width:50px;
}
.content-controls-right {
float:right;
width:35px;
}
.content-controls-middle {
float:left;
margin:auto 0;
}
What I would like to happen is that the image in the middle column is always centred in content-controls-middle - I have tried suggestions in:
CSS: center element within a <div> element
How do I put 3 div's side by side and center the content in each one
Three DIVs next to each other with fluid horizontal width
Align image in center and middle within div
and more but all to no avail - what am I doing wrong?
http://jsfiddle.net/8VS5U/

Answer 1

You'd be better off using a table layout if your middle cell will only contain inline content (which an image is):
/* Set container to display as a table. */
.content-controls {
display: table;
table-layout: fixed;
width:100%;
}
/* Set div elements within container to display as table cells. */
.content-controls div {
display: table-cell;
}
.content-controls-left {
width:50px;
}
.content-controls-right {
width: 35px;
}
/* Centrally align middle cell content. */
.content-controls-middle {
text-align: center;
}
JSFiddle demo.

Answer 2

You can change your CSS like this, it will allow the middle div to take the remainer space so you can just text-align the content.
CSS:
.content-controls {
width:100%;
}
.content-controls-left {
float:left;
width:50px;
}
.content-controls-right {
float:right;
width:35px;
}
.content-controls-middle {
text-align: center;
}
And you must change the HTML like so:
HTML:
<div class="content-controls">
<div class="content-controls-left">123</div>
<div class="content-controls-right">456</div>
<div class="content-controls-middle">ABC</div>
</div>
DEMO HERE

Answer 3

Try this: margin-left:40%; on your .content-controls-middle.
http://jsfiddle.net/8VS5U/7/
As James points out, if you make the window smaller, it won't be central. But this is good enough if you are not making a responsive website. I would prefer James' answer if you want a solid approach, and mine if you want a hacky way to do it :)