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/

这是你想要的吗？

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

2 个答案: