将三个div的中间居中并将另外两个相对于中间div定位

Question

对不起,如果标题令人困惑.基本上,我正在研究一个tumblr主题,我需要三个相邻的div包裹在一个固定宽度的容器中.它们的内容都没有固定,所以它们都有可变的宽度.中间div应始终以容器为中心,而左右的div将始终"触摸"中间div,因此,当中间div的宽度发生变化时左右移动(左右s可能是图像,所以text-align并不总是有效.另外,我可能还需要隐藏左,右或左右两个div.

这是一个概念图:

我可以轻松地使用flexbox(JFiddle)获得这个,但flex只有86%的全局支持.

这是我不使用flexboxes时最接近的,但我无法将中间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>

其他人提到试图将标题显示为一个表格,但这需要将中间单元格居中到整行,并且让左右两边的单元格占据剩下的空间,我不确定是否当宽度不固定时,你可以这样做.

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

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 上：

  /*Keep the center container on the middle*/
  .title {
     text-align:center;
   }
  .center {
     position:relative;
     display:inline-block;
  }
  
  /*Position elements based on the relative center parent*/
  .left {
     position:absolute;
     top:0;left:0;
     transform:translateX(-100%)
  }
  .right {
     position:absolute;
     top:0;right:0;
     transform:translateX(100%)
  }
  

检查这个DemoFiddle