html - 三个 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 并不总是居中。由于侧面 div 内容插入它们。那么我该如何实现呢？

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>