CSS 根据其他元素的高度垂直对齐

Question

我正在尝试创建一个包含您身边的内容的图像块，我打算根据内容的高度垂直对齐图像。我已经尝试使用 table/table-cell 技术对齐，但我无法得到我想要的..

点击这里查看我想要的：

Answer 1

你要做的第一件事就是将 display: table 放到 de container 和 display:table-cell 中； vertical-align:middle to lements inside the container.

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

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

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

CSS 根据其他元素的高度垂直对齐

CSS vertical align based on height of other element

html

css

alignment

vertical-alignment