html - Bootstrap, panel-footer with text align-center horizo​​ntally and vertically jump out 调整大小时

Question

我有一个带有 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;

还有其他垂直对齐文本的方法吗？

Answer 1

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

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

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