如何将具有动态宽度的 3 个 div 元素水平居中，第一个左，第二个中心，第三个右？答案

【问题标题】：How to horizontally center 3 div elements with a dynamic width, first left, second center, third right?如何将具有动态宽度的 3 个 div 元素水平居中，第一个左，第二个中心，第三个右？
【发布时间】：2013-12-24 23:57:41
【问题描述】：

我得到了三个在父 div 中动态变化的 div。我需要将第一个 div 向左对齐，中间的 div 必须居中，左右 div 具有相同的填充，而右边的 div 必须向右对齐。

听起来很容易，但不是（至少对我来说）！

【问题讨论】：

标签： css html

【解决方案1】：

您实际上也可以使用表格。由于表行为，这会很好地工作。

【讨论】：

【解决方案2】：

有人做了以下小提琴，但编辑方式错误！不幸的是，我不知道这是谁做的。也许是 spezzino，但我不确定：

HTML

<div class="wrap">

  <div class="left">
    left
  </div>

  <div class="right">
    right
  </div>

  <div class="center">
    center
  </div>

</div>

CSS

.wrap{
  text-align:center;
}

.left{
 float: left;
 background:grey
}

.right{
 float: right;
 background:red
}

.center{
 text-align:left;
 background:green;
 margin:0 auto; 
 display:inline-block
}

http://jsfiddle.net/66fCm/136/

无论如何，这很完美:-) 任何人都可以将此帖子标记为正确答案，因为我不能，因为声誉较低。

【讨论】：

【解决方案3】：

如果我理解您的问题，您可以使用列表获得结果。

因此，只需在列表项中包含左侧、中间和右侧 div 的内容，并像这样使用显示内联和填充：

li {
padding: 0 50px 0 0;
display: inline;
}

我为你做了一个小提琴。希望你可以使用它。

jsfiddle

【讨论】：

谢谢你，Legarndary。我回答了我自己的帖子，不幸的是我可以将其标记为答案，因为我没有足够的声誉。
很高兴我能帮上忙。它对您的问题有帮助吗？ :)

【解决方案4】：

你可以使用 display:flex;看到这个话题：Why does display: -ms-flex; -ms-justify-content: center; not work in IE10?

或使用inline-block 和text-align:justify; 伪造它如果您想包含较旧的 IE http://codepen.io/gcyrillus/pen/Babcs，这里有一个 codepen 示例：

<div class="justify">
  <div>Left</div>
  <div>Middle</div>
  <div>Right</div>
  <!--[if lte IE 7]>
     <span class="ie"></span>
  <![endif]-->
</div>

【讨论】：

flex 当前不兼容跨浏览器，某些浏览器（当前）不/部分支持弹性装箱。见：caniuse.com/flexbox
这就是为什么我建议 text-align:justify 甚至在 IE5.5 和其他任何地方都可以使用，只要你引入一个空元素而不是伪元素 :)
一些英语阅读以了解我在说什么:) barrelny.com/blog/text-align-justify-and-rwd

【解决方案5】：

只需将每个元素的宽度设置为 33% 见 jsfiddle 演示 http://jsfiddle.net/4VaRD/2/

HTML

<div class="container">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>

CSS

.container{
width: 100%;
}
.left{
background-color: red;
float: left;
text-align: left;
width: 33%;
}
.center{
background-color: green;
float: left;
text-align: center;
width: 33%;
}
.right{
background-color: blue;
float: left;
text-align: right;
width: 33%;
}

【讨论】：

不要忘记 OP 要求的对齐方式。