Question

我希望H2和P文本在紫色＆＃34; pic_and_product_area_b＆＃34;中垂直对齐。 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中脱颖而出。其他元素不再与浮动元素有关所以，问题是使用浮动。问题可以解决，让他们相对。

Answer 2

＆＃13;

.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;
}
h2{
font-family:arial,verdana,helvetica,sans-serif;
font-size:18px;
color:#201c1f;
text-decoration:none;
text-transform:uppercase;
font-weight:100;
margin-top: 100px;
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;
}

＆＃13;

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

＆＃13;

喜欢这个？我从h2和p上取下了行高，并在h2上添加了一个margin-top。

Answer 3

你需要giv margin-top到p elemenet替换这个css。

p{
  font-family: arial,verdana,helvetica,sans-serif;
  font-size: 14px;
  color: #333333;
  text-decoration: none;
  margin: -144px 0 0px 0;
  padding: 0 0 0 0px;
  line-height: 20px;
}

Answer 4

Your Answer is here

您的样式代码包含一些不允许查看正确更改的属性。所以，我建议你清理你不知道它做什么的每一个房产，并从这个朋友的答案开始你的风格代码。

行高会推送<p>文本但不会</p> <h2>文本

4 个答案: