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>

我的目标是让图标单元格始终水平居中，假设.container的{{1}}为100％。

我正在使用桌子一段时间，但是不可能这样做：

width

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

CodePen

Answer 1

您可以将display: inline-block与text-align: center一起用于div：

.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 float和align。 CSS： .left-text {float：left; } .right-text {float：right; } .icon-cell {text-align：center; } .container {display：inline-block; }

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/

以固定宽度div为中心，两侧有两个可变div

CodePen

6 个答案: