将三个div的中间对齐，并将其他两个相对于中间的div进行定位。

Question

抱歉，如果标题有点混淆。基本上，我正在制作一个Tumblr主题，其中需要三个相邻的div包含在固定宽度的容器中。它们的内容都不是固定的，因此它们的宽度都是可变的。中间的div应始终居中于容器，而左右的div将始终“接触”中间的div，并随着中间div的宽度变化而移动（左右的div可能是图像，因此text-align并不总是有效）。另外，我还可能需要隐藏左侧、右侧或左右两个div之一或两个。

这里是一个概念性的图像：

我可以轻松地使用flexbox来实现这一点（JFiddle），但是flex仅具有86％的全球支持率。

这是我在不使用flexbox的情况下能够得到的最接近的结果，但我无法使中间的div（带有文本）居中于标题div，同时保留两侧图像的相对位置：JFiddle

* {
    height: 100%;
    position: relative;
}
body {
    height: 200px;
}
/* just to get rid of scrollbar */
 p {
    margin: 0;
}
.title {
    background: #aaa;
    height: 22px;
    width: 450px;
    /* for example */
    margin: 0 auto;
}
.container {
    background: #abc;
    float: left;
}
.lr {
    transform: translate(0, -100%);
}
.left {
    background: green;
    float: left;
}
.left img {
    transform: translate(-100%);
}
.center {
    background: red;
    display: inline-block;
    z-index: 2;
}
.right {
    background: blue;
    float: right;
}
.right img {
    transform: translate(100%);
}
.left img, .right img {
    height: 100%;
}

<div class="title">
    <div class="container">
        <div class="center">CENTERCENTERCENTERCEN</div>
        <div class="lr">
            <div class="left">
                <img src="http://i.imgur.com/7bvErJN.jpg" />
            </div>
            <div class="right">
                <img src="http://i.imgur.com/q8Mq0YZ.jpg" />
            </div>
        </div>
    </div>
</div>

其他人提到尝试将标题显示为表格，但这需要将中间单元格居中到整行，并且使左右单元格占据其余空间，而当宽度不固定时，我不确定是否可以做到。

有人知道其他解决方案吗？

- velocirabbit

---

@Danko 这并不能将文本居中在中间的 div 中。我已经将中间的 div 缩小了，使得两侧的图像紧贴着文本，现在我正在尝试将中间的 div 居中，同时保持两个图像相对于该中间 div 的位置（不使用 Javascript 或 flex）。 - velocirabbit

是的，我的错误。如果您可以稍微更改一下您的标记，您就可以做到这一点。http://jsfiddle.net/ytye51zg/32/ - DaniP

@Danko 哇，这个完美地运行了！我测试了在左侧添加更多内容并将整个内容居中，它没有出现任何问题：http://jsfiddle.net/velocirabbit/ytye51zg/33/ 即使你删除中间的文本，它仍然��以正常工作。 - velocirabbit

是的，这是因为左右元素位于中心元素内部，并且可以相对于该元素定位。 - DaniP

太聪明了。我没有想到将左右两侧绝对定位在中心位置。再次感谢！ - velocirabbit

Answer 1

如果您可以更改您的HTML，则应用以下内容：

• 首先将左右元素移动到中心位置：

  <div class="center">
      CENTERCENTERCENTERCEN
      <div class="left">
         testtest<img src="http://i.imgur.com/7bvErJN.jpg" />
      </div>
      <div class="right">
         <img src="http://i.imgur.com/q8Mq0YZ.jpg" />
      </div>
  </div>
  

• 然后在CSS中：

  /*使中心容器保持在中间*/
  .title {
     text-align:center;
   }
  .center {
     position:relative;
     display:inline-block;
  }
  
  /*基于相对中心父级的位置元素*/
  .left {
     position:absolute;
     top:0;left:0;
     transform:translateX(-100%)
  }
  .right {
     position:absolute;
     top:0;right:0;
     transform:translateX(100%)
  }
  

请检查这个DemoFiddle

- DaniP

---

Fiddle链接失效了。不过我很好奇，这是个不错的方法。 - Blunderfest

@Blunderfest 修复链接 - DaniP

谢谢。这似乎仍然无法处理中间容器中的大量文本，而不会隐藏其中一个外部容器。也许这对于原帖作者来说是可以接受的？ - Blunderfest

@Blunderfest 你的意思是如果窗口大小太小，左边就会消失吗？http://jsfiddle.net/qehmzhdf/1/。由于宽度不是固定的，可能需要设置一些中心的最大宽度，仅使用CSS可能无法实现。 - DaniP

在我的观点里也失去了权利，但我明白你的意思。谢谢。 - Blunderfest

Answer 2

使用 position: absolute 应该有所帮助。

我将你的HTML更改为以下内容：

<div class="title">
    <div class="container">
        <img class="left" src="http://i.imgur.com/7bvErJN.jpg" />
        <div class="center">CENTERCENTERCENTERCEN</div>
        <img class="right" src="http://i.imgur.com/q8Mq0YZ.jpg" />
    </div>
</div>

CSS

.title {
    background: #aaa;
    height: 22px;
    width: 450px;
    /* for example */
    margin: 0 auto;
    text-align: center;
}
.container {
    background: #abc;
    display: inline-block;
    margin: 0 auto;
    position: relative;
    text-align: left;
}
.center {
    background: red;
}
.left, .right {
    position: absolute;
    top: 0px;
}
.left {
    right: 100%;
}
.right {
    left: 100%;
}

工作中的Fiddle

- Mr_Green

---

这段代码能否适应更大的文本？http://jsfiddle.net/q3Lcz4u8/7/ - Blunderfest

当您使用此方法在中间容器中添加大量文本时，外部容器会消失，就像我链接的fiddle一样。 - Blunderfest

@Blunderfest 是的，似乎无法仅通过 CSS 来修复。 - Mr_Green

Answer 3

更新以显示 OP 更新

这里不需要使用 flex，为什么不直接使用百分比呢？将所有容器浮动并将百分比相对于所需大小设置（中间50％，外部容器25％）。

您可以使用外部容器作为包装器，以便仍然可以在内部容器上使用边框而不会破坏大小。然后只需将内部容器浮动到外部容器中（如果有意义的话）。下面的示例只是将内部p标签浮动到外部容器中。

这使其始终紧贴内部容器，同时保持相对大小并保持中心对齐。

以下是示例：

Fiddle

HTML

<div class="container">
  <div class="flexa">
    <div class="left">
        <p>leftleft</p>
    </div>
    <div class="center"><p>CENTERCENTdsfdfdERCENTsdfdfsfERCEN</p></div>
    <div class="right">
        <p>ri</p>
    </div>
  </div>
  <div class="bottom">BOTTOMOMOM</div>
</div>

CSS

* {
  margin: 0;
  padding: 0;
}
div {
  background: #aaaaaa;
  overflow: hidden;
}
p{
  border: 1px solid black;
}
.container {
  width: 500px;
  /* for example */
  margin: 0 auto;
}
.right p{ /* This is what makes it work. This could be a div with class of inner or something like that. */
  float:left;
}
.left p{ 
  float:right;
}
.flexa div{
  float:left;
}
.left {
   width:25%;
}
.center {
  width: 50%;
}
.right {
  width:25%;
}
.bottom {
  display: block;
  margin: 0 auto;
  text-align: center;
}

- Blunderfest

---

固定宽度的div在这里不起作用。中间的div应该根据内容自动缩小，使图像紧贴文本。如果中间div的内容太短或太长，代码看起来会很奇怪。 - velocirabbit

@velocirabbit 嗯...这是一个有趣的问题。然而，在评论中提供的链接似乎也无法很好地处理大量文本？http://jsfiddle.net/pzafp2Lx/ - Blunderfest

在那个里面，我设置了一个固定的宽度，并没有设置overflow:hidden。如果你扩大窗口大小，使得标题div周围有足够的空间，它看起来仍然很好（尽管缺少overflow:hidden）。但是，没错，你是对的；应该设置overflow:hidden。 - velocirabbit