调整大小时,Bootstrap,面板页脚与文本对齐中心水平和垂直跳出

时间:2017-07-13 21:27:59

标签: html css twitter-bootstrap

我有一个带Bootstrap的面板页脚。我已经使用css中的text-align属性将文本置于其中,我也将其垂直居中(始终在css中)。这是css代码:

.panel-footer{
  padding: 0 15px;
  height: 80px;
  line-height: 80px;
  text-align: center; 
  color: #777;
  border: 1px solid;
  border-color: #e7e7e7;
  background-color: #FFFFFF;
}

这是html页面:

<div class="panel-footer">
    Title and text - More text - Tel. +00 0000 00000  Fax. 0000 000 000 - <a href="privacy.php"><u>Privacy Policy</u></a> - <a href="cookie.php"><u>Cookie Policy</u></a>
</div>

当我调整页面大小时,文本会跳出来。我检查了代码,问题是垂直对齐,并且是导致它的以下css代码:

line-height: 80px;

还有另一种垂直对齐文字的方法吗?

1 个答案:

答案 0 :(得分:1)

发生这种情况是因为您将div的高度设置为80px,尝试使用其他单位。例如height: 20%;

&#13;
&#13;
.panel-footer{
   padding: 0 15px;
   height: 20%;
   line-height: 80px;
   text-align: center; 
   color: #777;
   border: 1px solid;
   border-color: #e7e7e7;
   background-color: #FFFFFF;
 }
&#13;
<div class="panel-footer">
    Title and text - More text - Tel. +00 0000 00000  Fax. 0000 000 000 - <a href="privacy.php"><u>Privacy Policy</u></a> - <a href="cookie.php"><u>Cookie Policy</u></a>
</div>
&#13;
&#13;
&#13;