如何在div中垂直对齐2个类

NickD 发表于 Dev

尼克

我有一个包装，里面包括一些信息div。一切都很好，但是我不能使其在垂直方向上合理。

如何证明垂直对齐并定位在.title和.text类的中间？

body {
    margin-left: 0px;
    margin-top: 0px; 
    margin-right: 0px;
    margin-bottom: 0px;
}
#wrapper {
    position: absolute;
    width:96.4%;
    height:80%;
    border:1px solid #1f1e1e;
    padding:10px;
}
.info{
    position: relative;
    width:100%;
    height:32%;
    background-color:#1b1f1e;
    border-radius:6px;
    color:#fff;
    font-size:18px;
    margin-bottom:6px;
 }
.title{
    background-color:#dc6210;
    text-align:center;
    height:50%;
    line-height:50%;
    border-top-left-radius:6px;
    border-top-right-radius:6px;
 }
.text{
    text-align:center;
    height:50%;
    line-height: 50%;
 }

<div id="wrapper">
   <div class="info">
     <div class="title">Title</div>
     <div class="text"> "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." </div>     
  </div>
  <div class="info">
     <div class="title">Title</div>
     <div class="text"> "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." </div>  
  </div>
  <div class="info">
     <div class="title">Title</div>
     <div class="text"> "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." </div>
  </div>
</div>

费利克斯·阿杰（Felix AJ）

使用:before以帮助垂直对齐，并取出line-height: 50%;。

.info > div:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 1px;
}

body {margin-left: 0px;margin-top: 0px; margin-right: 0px; margin-bottom: 0px;}
#wrapper {width:96.4%;height:80%; border:1px solid #1f1e1e; padding:10px;}
.info{width:100%;height:32%;background-color:#1b1f1e; border-radius:6px;color:#fff;font-size:18px;margin-bottom:6px;}
.title{background-color:#dc6210;text-align:center;height:50%;border-top-left-radius:6px;border-top-right-radius:6px;}
.text{text-align:center;height:50%;}

#wrapper{
  min-height: 400px;
}
html, body{
  height: 100%;
}
p{
  margin: 0;
  display: inline-block;
  vertical-align: middle;
  width: 98%;
}
.info > div:before{
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 1px;
}

<div id="wrapper">
   <div class="info">
 <div class="title">Title</div>
 <div class="text">
 <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
 </div>     
  </div>
  <div class="info">
 <div class="title">Title</div>
 <div class="text">
 <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
 </div>  
  </div>
  <div class="info">
 <div class="title">Title</div>
 <div class="text">
 <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>
 </div>
  </div>
</div>