在頁腳中定位ap元素

Question

我無法將<p>垂直放置在頁腳中。 我試圖給p值： vertical-align:middle; 和margin-bottom:10px; 但它不起作用。

鏈接到代碼： http ： //jsfiddle.net/CL55P/

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父頁腳元素的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>刪除行高

你的jsFiddle在這里更新了