我正在尝试设置一个图标,该图标的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>
我的目标是使图标单元始终水平居中,假设
.container
的width
为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