垂直對齊h2和p標籤中的div

我試圖讓'method'和'text'字樣在'affiliates-methodology-text'div中垂直對齊，但無法使其正常工作。我試着垂直對齊，將文本包裝在一個塊中，設置行高，查看其他非常相似的線程等，但無法以任何方式使其工作。任何人都可以幫忙嗎？注意，這是一個模板，它說：「文本」將有一個描述時間超過1線垂直對齊h2和p標籤中的div

的代碼如下，或在這裏找到：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; 
}

來源

2015-08-19 user3760941

你想垂直在中間嗎？與[this]相關的 – user5173426

（http://stackoverflow.com/questions/79461/vertical-alignment-of-elements-in-a-div?rq=1）？ – cocoa

你的意思是水平嗎？他們正在垂直對齊。 –

您需要使用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; 
}

來源

2015-08-19 19:32:57 9997

文本需要垂直對齊，而不是div @ – cocoa

@cocoa編輯它。 – 9997

如果你指的是標題和段落標記的horisontal對準你可以使用顯示器的聯方法財產，例如像這樣：

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

來源

2015-08-19 19:36:24

您可以用Flexbox將實現這一目標。

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

來源

2015-08-19 20:05:59 cocoa

垂直對齊h2和p標籤中的div

回答

相關問題