内部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并不总是处于中心位置。随着方式内容推动他们。所以我该如何实现呢？

Answer 1

我建议使用这个CSS表格布局。我在左右两侧设置了50％，在中间设置了一个图像。因为它的表格布局不会中断，而是会重新计算50％的值并显示最佳宽度＆＃34;（100％ - 图像宽度）/ 2＆＃34;自动提供。

jsfiddle

＆＃13;

＆＃13;

.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; }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;