垂直对齐div中的h2和p标记

Question

我试图让‘方法’和‘文本’的单词垂直对齐在‘附属-方法-文本’div，但无法使它工作。我尝试过垂直对齐，将文本封装在一个块中，设置线条高度，查看其他非常相似的线程等等，但这两种方法都无法工作。有人能帮忙吗？注意，这是一个模板，其中写着“text”的描述将超过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；和display: table-cell；properties。

下面是一个小摆设：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;
}

Answer 2

如果您指的是标题和段落标记的水平对齐，您可以使用display属性的内联方法，例如：

<div class="wrap">
    <h3>Some h3 tag</h3>
    <p>Some p tag</p>
</div>

CSS

// All child elements inside the div with class 'wrap' will display as inline
.wrap > * {
    display:inline;
}

Answer 3

你可以用柔性盒实现这一点。

.affiliates-methodology-text {
  display: flex;
  align-items: center;
}