Question

我试图获得“＆＃39;方法＆＃39;和＆＃39;文字＆＃39;在＃aff; affiliates-methodology-text＆＃39;中垂直对齐div但无法使其发挥作用。我尝试过垂直对齐，将文本包装在一个块中，设置行高，查看其他非常相似的线程等，但不能以任何方式使其工作。有人可以帮忙吗？请注意，这是一个模板，并在其中显示“＆text;＆＃39;将有超过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;并显示：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;
}

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

3 个答案: