我正在尝试设置一个图标,该图标的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>


我的目标是使图标单元始终水平居中,假设.containerwidth为100%。

我使用了一段时间的桌子,但无法这样做:

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


关于不使用Java脚本如何执行此操作的任何想法?

CodePen

最佳答案

您可以将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

10-05 20:58
查看更多