我有一个带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;
还有另一种垂直对齐文字的方法吗?
答案 0 :(得分: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;
}
&#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;