在 div 中垂直对齐 h2 和 p 标签

Question

我试图让 'method' 和 'text' 在 'affiliates-methodology-text' 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

您需要使用显示器：table；并显示：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

如果你的意思是 header 和段落标记的水平对齐，你可以使用显示属性的内联方法，例如：

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;
}

在 div 中垂直对齐 h2 和 p 标签

Vertically aligning h2 and p tags in a div

html

css

vertical-alignment