html - 垂直对齐 div 中的 h2 和 p 标签

Question

我试图让“方法”和“文本”这两个词在“affiliates-methodology-text”div 中垂直对齐，但无法正常工作。我试过垂直对齐、将文本包装在一个 block 中、设置行高、查看其他非常相似的线程等等，但无论哪种方式都无法正常工作。有人可以帮忙吗？请注意，这是一个模板，其中显示“文本”的描述将超过 1 行

代码在下面，或者在这里找到它:jsfiddle.net/bxvge3rh/

HTML:

<div class="affiliates-methodology-wrap">
       <div class="affiliates-methodology-text">
       <h3 class="affiliates">Method</h3>
       <p class="affiliates2">text...</p>
       </div>
       <div class="affiliates-methodology-picture"></div>
       </div>


CSS:

.affiliates-methodology-text{
    width:810px;
    height:150px;
    background:#039;
    float:left;
    text-align:left;
}
.affiliates-methodology-picture{
    width:150px;
    height:150px;
    background:#9F0;
    float:left;
}
.affiliates-methodology-wrap{
    background:#F00;
    height:auto;
    width:auto;
}

Answer 1

需要使用display: table;并显示:表格单元格；属性。

这是一个 jsfiddle:https://jsfiddle.net/hLd3z3mt/1/

HTML

<div class="affiliates-methodology-wrap">
   <div class="affiliates-methodology-text">
       <div class="outerDiv">
           <div class="valign">
               <h3 class="affiliates">Method</h3>
               <p class="affiliates2">text...</p>
           </div>
       </div>
   </div>
   <div class="affiliates-methodology-picture"></div>
</div>

CSS

.affiliates-methodology-text{
    width:810px;
    height:150px;
    background:#039;
    text-align: left;
    float: left;
}
.outerDiv {
    display: table;
}
.valign {
    display: table-cell;
    vertical-align: center !important;
    padding-top: 40%;
}
.affiliates-methodology-picture{
    width:150px;
    height:150px;
    background:#9F0;
    float:left;
}
.affiliates-methodology-wrap{
    background:#F00;
    height:auto;
    width:auto;
}