使用CSS在响应式div中垂直居中响应图像

Question

编辑 - 根据要求提供小提琴 jsfiddle.net/daghene/eq4tfzLn /

我已经在Stackoverflow和Google上搜索了很多，但我找到了答案，但即使有很多，我也不知道他们为什么不工作，也不知道我＆＃ 39;正确处理此布局。

基本上我使用Skeleton响应式框架来制作单页面布局，我有一个部分，左边是这个图像，右边是文本。在它下面是一个带有最新消息的小推文段落。

基本上我的问题是：当第一行变得太小而文本开始变长时，图像变得太小而我认为最好的解决方案是垂直居中，但它和div的高度都是响应（大多数解决方案要求两个中的至少一个是固定高度）。

你的建议是什么，更重要的是我是否在逻辑视角处理这个布局，或者是否可以让段落得到很长时间图像只是贴在上面？

请注意，它在桌面设备，平板电脑和智能手机上显示正常，只有那个小部分有点奇怪... here＆＃39; s我的布局是如何行动的截图 ，第三个是我认为应该修复的，因为看起来有点难看并且可能使图像居中有帮助。

P.S。有一件事我忘记了，因为大多数自适应框架，因为Skeleton不能放置我的代码，只需要一个带有 .row 和 .X的 .container 类。在它里面的列给出div的大小和居中，我还没有添加任何东西。我认为我唯一能做的就是将这些部分放在固定高度的div中，因为我打算让用户将它们作为幻灯片滚动，并且它们总是需要100％视口高度或者至少一个固定的高度，比如600px缩放。

Ps2如果唯一的解决方案是js，因为我们始终不知道段落和img的高度继续提出解决方案，我问这是不是可以用CSS完成，因为我还没有那么擅长js。

Answer 1

我会给thanksup行一个id - 例如vertical，然后您可以使用以下样式来实现垂直对齐：

#vertical {
    display:table;
    width:100%;
}
#vertical > .columns {
    float:none;
    display:table-cell;
    vertical-align:middle
}
@media (max-width: 565px) {
  #vertical  > .columns {
    display: block;
}

Updated fiddle