两张图片一左一右垂直居中答案

【问题标题】：Two images one left one right and center vertically两张图片一左一右垂直居中
【发布时间】：2017-01-05 15:56:49
【问题描述】：

我有这段代码，它将两个图像与页面的左侧和右侧对齐，中间有空格：

.center {
  width: 100%;
  display: table;
}
.leftk {
  display: table-cell;
}
.rightk {
  display: table-cell;
  text-align: right;
  vertical-align: middle;
}

<div class="center">
  <div class="leftk">
    <img src="http://loremflickr.com/300/200" />
  </div>
  <div class="rightk">
    <img src="http://loremflickr.com/400/100" />
  </div>
</div>
<span>Text</span>

我尝试对inline-block 做同样的事情，但我无法将图像垂直对齐到中心。你能告诉我一个如何使用inline-block 获得相同结果的简单示例吗？

编辑：如果页面尺寸小于图像宽度，我想将它们显示在彼此下方。

【问题讨论】：

为什么不只保留表格，然后在宽度太小时使用媒体查询将表格单元格更改为阻塞？比使用内联块 hack 更好

标签： html css

【解决方案1】：

以下是使用内联块的方法：

jsFiddle

.center {
  font-size: 0; /*remove white space*/
  text-align: justify;
}
.center:after {
  content: "";
  display: inline-block;
  width: 100%;
}
.leftk,
.rightk {
  font-size: 16px;
  display: inline-block;
  vertical-align: middle;
}

<div class="center">
  <div class="leftk">
    <img src="//dummyimage.com/200x200" />
  </div>
  <div class="rightk">
    <img src="//dummyimage.com/100x100" />
  </div>
</div>

【讨论】：

【解决方案2】：

你可以改用css3 flexbox，

使用 display:flex 代替 display:table
添加 justify-content:space-between;

一切正常。

.center {
  width: 100%;
  display: flex;
  justify-content:space-between;
  align-items:center;
}
.leftk>img {
  width:100px;
  height:100px;
}
.rightk>img {
  width:50px;
  height:50px;
}

<div class="center">
    <div class="leftk" style="display: table-cell;">
        <img src="https://i.stack.imgur.com/wwy2w.jpg"/>
    </div>
    <div class="rightk">
        <img src="https://i.stack.imgur.com/wwy2w.jpg"/>
    </div>
</div>
<span>Text</span>

【讨论】：

现在用flex可以吗？在我的网站上，我有大约 5-8% 的 IE 9 用户。