html - 将两个 div 与所有设备的图像和文本对齐

Question

我有以下 HTML:

<div class = "container">
  <div class = "img">
    <img src = "http://icons.iconarchive.com/icons/danieledesantis/playstation-flat/512/playstation-cross-icon.png">
  </div>
  <div class = "text">
    <h1>
      Click to close your window.
    </h1>
  </div>
</div>

和 CSS:

.img {
  width: 30%;
  float: left;
}
.text {
  width: 70%:
  float: right;
}

我想将文本 div 与 img div 垂直对齐。我想保持灵活的高度所以我不能使用

display: table and display: table-cell;

我尝试在文本上使用 padding-top，但我无法让它适用于所有设备。

如何将文本 div 与 img div 对齐，以便文本始终位于图像的中间？

这是 jsfiddle:https://jsfiddle.net/whqL4fot/1/

Answer 1

开始使用 Flexbox :)

.container {
    -webkit-flex-direction: row; 
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
}

更新了 jsfiddle ( https://jsfiddle.net/whqL4fot/2/ )