html - 行高推开 <p> 文本而不是 <h2> 文本

Question

我希望 H2 和 P 文本在紫色的“pic_and_product_area_b”div 中垂直对齐，但是由于某种原因 P 文本在 div 之外(在我添加了 300px 的行高之后发生了这种情况，但是在 H2 和P 文本位于顶部的 div 内)。如何让 div 中的 H2 和 P 文本在中间垂直对齐？

HTML:

<div class="pic_and_product_b">
<div class="pic_and_product_area_b">
<h2>H2 TEXT</h2>
<p>P TEXT</p>
</div>
<div class="pic-b"></div>
</div>

CSS:

.pic_and_product_a{
width:960px;
height:300px;
float:left;
background:#3F3;
}
.pic_and_product_b{
width:960px;
height:300px;
float:left;
background:#33F;
}
.pic-a{
width:300px;
height:300px;
float:left;
background:#660;
}
.pic-b{
width:300px;
height:300px;
float:left;
background:#906;
}
.pic_and_product_area_a{
width:630px;
height:300px;
float:left;
background:#960;
margin-left:30px;
}
.pic_and_product_area_b{
width:630px;
height:300px;
float:left;
background:#96C;
margin-right:30px;
text-align:right;
line-height:300px;
}
h2{
font-family:arial,verdana,helvetica,sans-serif;
font-size:18px;
color:#201c1f;
text-decoration:none;
text-transform:uppercase;
font-weight:100;
margin:0;
padding: 0 0 10px 0;
}
h2 a:link{
color:#201c1f;
text-decoration:none;
}
h2 a:visited{
color:#201c1f;
text-decoration:none;
}
h2 a:hover{
color:#201c1f;
text-decoration:underline;
}
h2.onpages{
font-weight:100;text-transform:none;font-size:11px;
}
p{
font-family:arial,verdana,helvetica,sans-serif;
font-size:14px;
color:#333333;
text-decoration:none;
margin:0 0 0px 0;
padding:0 0 0 0px;
line-height:20px;
}
p a:link{
color:#333333;
text-decoration:underline;
}
p a:visited{
color:#333333;
text-decoration:underline;
}
p a:hover{
color:#333333;
text-decoration:underline;
font-weight:bold;
}

Answer 1

您已经使用了 float 属性。 float 将使您的元素在 DOM 中脱颖而出。 其他元素不再与 float 元素有关系 所以，问题是使用 float 。 保持它们的相对性可以解决问题。