Three divs inline with middle div always in center of the container - html

Question

I have three divs, all inline under a parent div. And my goal is to make middle div ALWAYS in the centre of the parent div. While rest two side divs are responsive. In left hand side div, text is align to right while in left hand side div, its aligned to left. And middle div's width is fixed, say 80px. Parent div's max and min width are also set. I have this:
<div style="max-width: 500px;min-width:450px;">
<div style="display:inline-block;text-align:right;">Posted by</div>
<div style="display:inline-block;text-align:center;width:80px;">
<img src="default.png" style="width:80px;height:20px;border:2px solid #fff;border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;">
</div>
<div style="display:inline-block;">Johnathan Bestualzaukazoa</div>
</div>
I want to have something like this:
But middle div is not always in center. As side divs content push them.So how can I achieve it?

Answer 1

I suggest to use this CSS table layout for it. I set 50% on both left and right sides, and middle one with an image. Because it's table layout it won't break, instead it will re-calculate the value of 50% and display the best width "(100% - image width) / 2" available automatically.
jsfiddle
.container {
display: table;
border: 2px solid grey;
margin: 20px auto;
}
.container > div {
display: table-cell;
}
.left, .right {
width: 50%;
padding: 0 10px;
}
.left {
text-align: right;
}
.middle img {
vertical-align: middle;
}
.right {
text-align: left;
}
.container1 { width: 500px; }
.container2 { width: 400px; }
.container3 { width: 300px; }
<div class="container container1">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
<div class="container container2">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>
<div class="container container3">
<div class="left">L</div>
<div class="middle"><img src="//dummyimage.com/80x40"></div>
<div class="right">R</div>
</div>