对齐到中心/中间元素：没有弹性，没有定义的单元格大小答案

【问题标题】：Align to center/middle elements: no flex, no defined cell size对齐到中心/中间元素：没有弹性，没有定义的单元格大小
【发布时间】：2015-12-26 23:24:15
【问题描述】：

我需要将包含 3 个元素的横幅对齐到中心。

条件：
1) 所有元素应垂直居中对齐（在同一行）；
2) Marginal 元素（红色）应该类似于“inline-blocks”[=][=]，自动调整大小，未定义大小！
3) Central（绿色）元素应占据所有剩余位置，将元素垂直和水平居中对齐。
4) 我需要支持IE 9，所以no flex...

这是我的代码使用 FLEX，我也看到右边的页边距溢出了......

JS FIDDLE

html, body {
    width:100%;
}
.container {
    display: table-row;
    background: yellow;
    width: 100%;
}
.first, .last, .center {
    display: table-cell;
    vertical-align: middle;
    text-align: center;    
    background: red;
}
.first>div {display: flex;}
.last>div {display: flex;}
.center {    
    background: green;
    width: 100%;
}

<div class="cotnainer">
    <div class="first">
        <div>
            <img src="http://dummyimage.com/32x40" alt="">
            <div>image 40</div>
        </div>
    </div>
    <div class="center">
        <div>
            <img src="http://dummyimage.com/16x16" alt="">
            <img src="http://dummyimage.com/16x16" alt="">
            <img src="http://dummyimage.com/16x16" alt="">
        </div>
    </div>
    <div class="last">
        <div>
            <div>image 50</div>
            <img src="http://dummyimage.com/38x50" alt="">
        </div>
    </div>
</div>

如何消除 flex 并尊重正文右侧默认边距（填充）？

【问题讨论】：

标签： css

【解决方案1】：

样式化嵌套元素

这很脏……

您可以使用通用选择器* 来创建嵌套div 内联块元素的所有子元素。添加vertical-align: middle 可确保img 元素与文本正确对齐。将white-space: nowrap 应用于父级以确保它们不会换行。

.container > div > div {
  white-space: nowrap;
}
.container > div > div > * {
  display: inline-block;
  vertical-align: middle;
}

一个工作示例：

html,
body {
  width: 100%;
}
.container {
  display: table;
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  background: yellow;
}
.container > div {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  background: red;
}
.container > .center {
  width: 100%;
  background: green;
}
.container > div > div {
  white-space: nowrap;
}
.container > div > div > * {
  display: inline-block;
  vertical-align: middle;
}

<div class="container">
  <div class="first">
    <div>
      <img src="http://dummyimage.com/32x40" alt="">
      <div>image 40</div>
    </div>
  </div>
  <div class="center">
    <div>
      <img src="http://dummyimage.com/16x16" alt="">
      <img src="http://dummyimage.com/16x16" alt="">
      <img src="http://dummyimage.com/16x16" alt="">
    </div>
  </div>
  <div class="last">
    <div>
      <div>image 50</div>
      <img src="http://dummyimage.com/38x50" alt="">
    </div>
  </div>
</div>

【讨论】：