将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-cell；属性。

这里是一个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;
}

Answer 2

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

HTML

<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

您可以使用flexbox实现此目的。

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

Answer 4

只需将margin-top: 0;赋予h或p标签