Html 三个div内联，中间div始终位于容器的中心

我有三个div，都在一个父div下内联。我的目标是使中间div始终位于父div的中心。而其余两个侧div是响应性的。在左侧div中，文本向右对齐，而在左侧div中，文本向左对齐。中间div的宽度是固定的，比如说80px。父div的最大和最小宽度也被设置。我有这个：

<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>

邮寄人
约翰纳森·贝斯图尔扎卡佐亚

我想要这样的东西：

---

但中卫并不总是居中。作为侧边div内容推送它们。那么我如何实现它呢？

我建议使用这个CSS表格布局。我在左右两侧都设置了50%，中间一个有图像。因为它是表布局，所以不会中断，相反，它将重新计算50%的值，并自动显示可用的最佳宽度“（100%图像宽度）/2”

.container{
显示：表格；
边框：2倍纯色灰色；
保证金：20px自动；
}
.container>div{
显示：表格单元格；
}
.左，.右{
宽度：50%；
填充：0 10px；
}
.左{
文本对齐：右对齐；
}
.中img{
垂直对齐：中间对齐；
}
.对{
文本对齐：左对齐；
}
.container1{宽度：500px；}
.container2{宽度：400px；}
.container3{宽度：300px；}

L
R
L
R
L
R

中灰色区域是否始终为图像？是，中灰色div将始终包含图像only@Pangloss它工作得很好。但我想知道它是如何工作的：）这里的秘密是什么？你有左边和右边都有50%的宽度，那么中间的那个怎么正好在中间呢？中间的div不一致，总是在中间。。不确定这是否是@JVK想要的@DyrandzFamador我同意，如果有一个相当长的单词，但不确定它在真实情况下发生的可能性有多大，一个快速修复方法是在必要时打破looooong单词以保持布局-