CSS垂直对齐基于其他元素的高度

Question

我尝试使用包含您身边内容的图片创建一个块，我打算根据内容的高度垂直对齐图像。我已尝试使用表格/表格单元格技术进行对齐，但我无法获得我想要的内容..

点击这里查看我想要的内容：

Answer 1

你可以用flex-box解决这个问题，这是一种方法：

＆＃13;

＆＃13;

body
{
  padding: 20px 0;
}

.gallery-item
{
  background-color: gray; 
  display: flex;
  margin-bottom: 60px;
}

.gallery-item
{
  flex: 1 0 auto;
}

.gallery-item .image-container
{
  position: relative;
  flex: 0 0 auto;
  align-self: center;
}

.gallery-item .image-container img
{ 
  margin: -20px auto;  
}

.gallery-item .text-container
{ 
  padding: 10px;
}

＆＃13;

<div class="gallery-item">
  <div class="image-container">
    <img src="http://www.placehold.it/200x200">
  </div>
  <div class="text-container">
    <p>Text</p>
  </div>
</div>


<div class="gallery-item">
  <div class="image-container">
    <img src="http://www.placehold.it/200x200">
  </div>
  <div class="text-container">
    <p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

这是一个codePen：http://codepen.io/anon/pen/xGdGPV

许多代码不是强制性的，例如.gallery-item的边距和正文的padding，但你明白了。

Answer 2

这可以在不使用flex-box的情况下解决我的问题，我需要它在旧浏览器中工作

.container {
  position: relative;
  background:#eee;
  padding: 20px 20px 20px 450px;
}
img {
   position:absolute;
    left:0;
    top:50%;
    margin-top:-100px;
}

Answer 3

你要做的第一件事就是将display：table放到de container并显示：table-cell; vertical-align：容器内部的中间位置。