没有定义高度的div垂直对齐

Question

大家好，一直在努力搜索，但找到了各种似乎无法解决我的问题的答案。

我有一个 div 框需要垂直居中对齐到它旁边的 div 框匹配它的高度没有定义为内容会改变

但是无论旁边的 div 框的高度是多少，我都需要左框中的内容居中。

任何帮助将不胜感激。 谢谢

<div class="container">
   <div class="leftCol"> 
        Content or image in here needs to be vertical center based on div next to it height <
   /div>
   <div class="rightCol"> 
         Content here 
   </div> 
</div>

Answer 1

这是一个使用 CSS 表格的示例。

.table-panel {
  display: table;
}
.table-panel div {
  display: table-cell;
  vertical-align: middle;
  border: 1px dotted gray;
}

<div class="table-panel">
  <div>Left panel</div>
  <div>Right panel: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu pulvinar risus. Vestibulum imperdiet velit nisi, eget ullamcorper urna rutrum vel. Aliquam tristique elit augue, nec lobortis eros pretium quis. Proin ac quam pretium,
    fringilla est et, sodales erat. Cras quis odio est. Integer ornare, neque in efficitur ultricies, justo magna ornare enim, quis dictum enim ipsum vel urna. Cras consectetur orci id quam cursus feugiat. Proin laoreet ullamcorper est vitae sagittis.
    Aliquam faucibus elit sed sodales varius. Phasellus maximus turpis non nisl lobortis, sit amet efficitur lacus suscipit. Nunc a ligula a est feugiat mollis in a lacus.</div>
</div>

Answer 2

如果我正确理解您的问题，您正在寻找的是两个左右框的包装器。然后在包装器中，您希望这两个框是内联块并且可能带有垂直对齐：中间？

看到这个小提琴：

<div id="wrap">
  <div class="left-box"></div>
  <div class="right-box"></div>
</div>

#wrap{
    width:250px;
    height:auto;
    background:#efefef;
}
.left-box{
    display:inline-block;
    width:100px;
    height:150px;
    background:#00ff00;
    vertical-align:middle;
}
.right-box{
    display:inline-block;
    width:100px;
    height:180px;
    background:#ff0000;
    vertical-align:middle;
}

http://jsfiddle.net/0kpdskf2/

这是你想要的吗？