css - 居中固定宽度的 div，两侧是两个可变 div

Question

我正在尝试设置一个以 div 为中心的图标的显示。左侧和/或右侧是可变数量的文本。例子：

<div class="container">
    <div class="left-text">This text is on the left</div>
    <div class="icon-cell"><div class="icon smiley-face"></div></div>
    <div class="right-text">And more text is over here...</div>
</div>

我的目标是让图标单元始终水平居中，假设.containerawidth为 100%。

我用了一段时间的桌子，但不可能这样做：

<td style="width:50%"></td>
<td style="width:48px"></td>
<td style="width:50%"></td>

关于如何在不使用 Javascript 的情况下执行此操作的任何想法？

代码笔

Answer 1

您可以display: inline-block将 div 与以下内容结合使用text-align: center：

.container {
    width: 100%;
    background: #eee;
    text-align: center;
}

.container > div {
    display: inline-block;
}

.container > .icon-cell {
    width: 50px;
}

Example

插入更多文本时会出现问题。然后您需要固定容器元素的宽度并消除内联块之间的空白（我使用font-size: 0）。这是另一个例子：

More Text

Answer 2

这给你一种干净的报纸外观......

.container {
  width: 100%;
  height: 300px;
}
.left-text {
  position:absolute;
  background: rgba(0, 255, 0, .2);
  margin-left:0px;
  top:0px;
  padding-right:350px;
  text-align:justify;
  text-justify:auto;
}
.right-text {
  position:absolute;
  background: rgba(0, 0, 255, .2);
  margin-right:0px;
  top:0px;
  padding-left:350px;
  text-align:justify;
  text-justify:auto;
}
.icon.smiley-face {
  background: url(//placehold.it/48/48/00ff00);
  height: 48px;
  width: 48px;
  margin:0px auto;
}

Answer 3

这个技巧可能有效

.icon{
  width:100px;
  margin:0 auto;
}

Answer 4

使用 css 浮动和对齐。CSS：.left-text { 浮动：左；} .right-text { 浮动：对；} .icon-cell { 文本对齐：居中；} .container { 显示：内联块；}

Answer 5

您可以只使用边距并显示：inline-block; 在 CSS 中

Answer 6

我想我参加聚会有点晚了，但这也可以使用display: table-cell;. 大量文本应该环绕而不是推动图标，如果您想要填充“单元格”，则无需补偿居中图标的宽度。

.container {
  background: #eee;
  display: table-row;
}

.container > div {
  display: table-cell;
  vertical-align: top;
  width: 50%;
}

.container > .icon-cell {
  min-width: 50px;
  width: 50px;
}

.container > .icon-cell img {
  width: 100%;
  height: auto;
}

http://jsfiddle.net/Ljho1nx9/2/