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

Question

我正在尝试创建一个包含内容的图像块，我打算根据内容的高度垂直对齐图像。我试过用表格/表格单元技术对齐，但我无法得到我想要的。

点击这里看看我想要什么：

​

​

Answer 1

这解决了我的问题而不使用flex-box，我需要它在旧的浏览器中工作。

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

Answer 2

您可以使用flex-box来解决这个问题，下面是一种方法：

​

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;
}

<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>

​

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

很多代码并不是强制性的，比如.gallery-item的边距和主体的padding，但是你明白了。

Answer 3

您必须做的第一件事是将显示:表到容器和显示:表格单元格；垂直对齐:从中间到容器内的列。