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

Question

我有三个 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 并不总是在中心。作为side divs内容推送它们。那么我该如何实现呢？

Answer 1

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

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>