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

Question

编辑 - 根据要求，这是 fiddle jsfiddle.net/daghene/eq4tfzLn/

我已经在 Stackoverflow 和 Google 上进行了大量搜索以找到这个问题的答案，但即使有很多我也不知道为什么它们不起作用，也不知道我是否正确处理了这个布局。

基本上，我使用 Skeleton 响应式框架来制作单页布局，并且我有一个部分，其中一行的左边是这张图片，右边是文本。在它下面有一个包含最新消息的小 Twitter 段落。

基本上我的问题是:当第一行变得太小并且文本开始变长时，图像变得太小，我认为最好的解决方案是将它垂直居中，但它和 div 的高度都是响应式的(大多数解决方案至少需要两者之一是固定高度)。

你有什么建议，更重要的是我是否从逻辑 Angular 很好地处理了这种布局，或者让段落变得那么长是否可以，而图像只是坚持顶部？

请注意，它在台式机、平板电脑和智能手机上显示良好，只有一小部分有点奇怪...这是我的布局如何运行的屏幕截图，第三个是我认为应该修复的一个，因为它看起来有点难看，也许将图像居中会有所帮助。

附言我忘记了一件事，自从 Skeleton 以来就没有放置我的代码，因为大多数响应式框架只需要一个 .container 类，其中包含 .row 和 .X 列 在里面给 div 大小和居中，我还没有在上面添加任何东西。我认为我唯一要做的就是将这些部分放在固定高度的 div 中，因为我计划让用户将它们作为幻灯片滚动，并且它们始终需要 100% 视口(viewport)高度或至少是固定高度，比如 600px缩放。

P.s.2 如果唯一的解决方案是 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