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

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

看到这个Fiddle:

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

这是你想要的吗？

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

Div vertical align without defined height

html

css

vertical-alignment

centering