CODEWITHSUNDEEP
csscss-position
Delal
Delal

Reputation: 131

Position a p element in footer

I can't position the <p> vertically in the footer. I have tried to give p the values: vertical-align:middle; and margin-bottom:10px; but it is not working.

Link to the code: http://jsfiddle.net/CL55P/

HTML:

<footer>
        <p id="sidfot">Kontakta oss på:
        <a href="mailto:[email protected]">[email protected]</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;
}

Thanks

Upvotes: 0

Views: 101

Answers (4)

Milche Patern
Milche Patern

Reputation: 20462

If you need to make <footer> 40px high, 

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 */
}

And you can remove line-height from <footer>

Your jsFiddle updated here

Upvotes: 0

uxtx
uxtx

Reputation: 329

the line-height: 40px of the parent footer element is overriding the line-height of the p, which inherits that value, and pushing it to the bottom of the element.

setting line-height should help:

footer p {
    line-height: 14px;
}

Upvotes: 0

Bryan Elliott
Bryan Elliott

Reputation: 4095

Add margin: 0; and line-height: 40px; to #sidfot like so:

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

Here's the updated jsfiddle: http://jsfiddle.net/CL55P/2/

Upvotes: 1

Andrew
Andrew

Reputation: 20081

You can try giving the p span these properties:

display: table-cell;
vertical-align: middle

Upvotes: 1

Related Questions