Question

我无法弄清楚为什么文本不会与div的中间对齐，这就是我认为会导致页面底部的空白区域，我希望文本位于中间（高度）页脚的两个div（我有两个div强制每个文本部分到页面边缘）

HTML：

 <div class="yellowfooterbackground">

 <div class="yellowfootercontent">

 <div class="yellowfootercontentleft">


 <p>IPS Fire & Security is a trading name of IPS Facilities - <u><a href="Terms-And-Conditions.html">Terms & Conditions</a></u></p>  

 </div>

 <div class="yellowfootercontentright">

 <p> Web Design & SEO by Raven </p>

 </div>
</div>
</div>

CSS：

  .yellowfootercontent {
height: 30px;
width: 950px;
margin-right: auto;
margin-left: auto;  
font-family: 'Open Sans', Arial, sans-serif;
font-size:12px;


}

  .yellowfootercontentleft {
height: 30px;
width: 475px;
float: left;
text-align: left;


 }

 .yellowfootercontentright {
height: 30px;
width: 475px;
text-align: right;
float: right;
 }

Answer 1

试试这个：

.yellowfooterbackground {
margin-top:-12px;
width:100%;
height:30px;
background-color:#ffd602;
padding-bottom:12px;
}

 .yellowfootercontent {
height: 30px;
width: 950px;
margin-right: auto;
margin-left: auto;  
font-family: 'Open Sans', Arial, sans-serif;
font-size:12px;
line-height:40px;
}

.yellowfootercontentleft {
height: 30px;
width: 475px;
float: left;
text-align: left;
}

.yellowfootercontentright {
height: 30px;
width: 475px;
text-align: right;
float: right;
line-height:42px;
}

我添加了一些行高属性。我不确定它是最聪明的方式，但不知何故，它解决了这个问题。见JsFiddle

为什么底部存在缺口，填充/边距无缘无故

1 个答案: