Question

我无法将<p>垂直放在页脚中。我试图给出p值： vertical-align:middle;和margin-bottom:10px;，但它无效。

HTML：

<footer>
        <p id="sidfot">Kontakta oss på:
        <a href="mailto:info@snickrat.se">info@snickrat.se</a> eller 073 - 729 87 97</p>        
</footer>

CSS：

footer{
    clear:both;
    width:100%;
    height:40px;
    line-height:40px;
    position:fixed;
    bottom:0px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow:    2px 3px 6px -0.5px #ccc;
    -webkit-box-shadow: 2px 3px 6px -0.5px #ccc;
    box-shadow:         0px -3px 6px -0.5px #ccc;
    background-color:#BFBDBF;}
    #sidfot{text-align:center;
    font-size:14px;
}

由于

Answer 1

您可以尝试让p跨越这些属性：

display: table-cell;
vertical-align: middle

Answer 2

将margin: 0;和line-height: 40px;添加到#sidfot，如下所示：

#sidfot {
    margin: 0;
    line-height:40px;
    text-align:center;
    font-size:14px;
}

这是更新的jsfiddle：http://jsfiddle.net/CL55P/2/

Answer 3

父页脚元素的line-height: 40px覆盖p的行高，它继承该值，并将其推送到元素的底部。

设置line-height应该有帮助：

footer p {
    line-height: 14px;
}

Answer 4

如果你需要让<footer> 40px高，

footer {
    clear:both; /* this is useless since width is 100% */
    width:100%; /* while you position in fixed, you should use left:Xpx; right:Xpx; instead */
    position:fixed;
    bottom:0px; /* 0 (zero) do not need a mesurement unit. remove px  */
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -moz-box-shadow: 2px 3px 6px -0.5px #ccc;
    -webkit-box-shadow: 2px 3px 6px -0.5px #ccc;
    box-shadow: 0px -3px 6px -0.5px #ccc;
    background-color:#BFBDBF;
}
#sidfot {
    text-align:center;
    font-size:14px;
    vertical-align:middle; /* this will position text in middle of line-height */
    line-height:40px; /* this will force footer height */
    margin:0; /* make sure this is reset, otherwise, browser default margin will apply */
}

您可以从<footer>

中删除行高

Your jsFiddle updated here

将p元素放在页脚中

4 个答案: