Question

我有一个包装器，里面包含一些信息div。一切都很好，但我不能让它垂直对齐。

如何证明垂直对齐并定位在中间.title＆amp; .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>

Answer 1

使用: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>

https://jsfiddle.net/afelixj/3rj01sp2/1/

Answer 2

更新Css

.title {
    background-color: #dc6210;
    text-align: center;
    padding:10px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;

}

.text {
    text-align: center;
    padding:16px;
}

Live Demo

注意：删除您的height:50%;line-height: 50%;和添加填充

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

2 个答案: