在响应 div 和 CSS 中垂直居中响应图像

Question

编辑 - 根据要求这里是 Fiddle jsfiddle.net/daghene/eq4tfzLn/

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

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

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

你有什么建议更重要的是我是否从逻辑角度很好地处理了这个布局或者是否可以让段落得到图像只是贴在顶部那么久？

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

P.s。我忘记了一件事，自从 Skeleton 以来就没有放我的代码，作为大多数响应式框架，只需要 .container class 和 .row 和 .X columns 在里面给 divs 大小和居中，我还没有在上面添加任何东西。我想我要做的唯一一件事就是将这些部分放在固定高度的 div 因为我计划让用户将它们滚动为幻灯片并且它们总是需要 100% 视口高度或至少是固定的高度比如 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

在响应 div 和 CSS 中垂直居中响应图像

Vertically center responsive image in responsive div with CSS

css

layout

image

vertical-alignment

responsive-design