CODEWITHSUNDEEP
css
user3449454
user3449454

Reputation: 49

footer menu not center aligned

I have a footer divided into 2 rows, i.e footer-top and footer-bottom.

footer-top has text which aligns in center perfectly. However footer-bottom has menu which is not center-aligned.

My html:

<div class="page-wrap"> 
    <footer>
        <div class="footer-top">
            Copyright
        </div>
        <div class="footer-bottom">
            <ul class="footermenu">
                <li><a href="#">LEGAL</a></li>
                <li><a href="#">PRIVACY</a></li>
                <li><a href="#">COPYRIGHT</a></li>
            </ul>
        </div>
    </footer>
 </div>

My css: 

.page-wrap {
    width: 100%;
    height: 100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

footer {
    width: 100%;
    background-color: #8DC63F;
    display: block;
    float: left;
    clear: both;
    text-align:center;
}

.footer-top { width: 100%; float: left;padding-top:10px; color: #FFFFFF;}

.footer-bottom {
    width: 100%;
    text-align: center;
    float: left;
    display: inline-block;
}

.footermenu a {
    color: #FFFFFF;
    float: left;
    font-size: medium;
    list-style-type: none;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
}

.footermenu li {
    width: auto;
    float: left;
    text-align: center;
    list-style-type: none;
    text-decoration: none;
}
.footermenu {
    text-decoration: none;
    width: auto;
    text-align: center;
}

and here is the

DEMO

Upvotes: 0

Views: 3014

Answers (3)

badAdviceGuy
badAdviceGuy

Reputation: 2090

Try this and see if it works for you:

Demo Fiddle

I agree with the other answers that you should use inline-block, but to do so you'll need to comment out the float entries, and rely on text-align: center.

CSS, I've gone ahead and commented out the styles you probably don't need:

/* new css */
.footermenu li {
    display: inline-block;
    margin-bottom: 10px;
}

/* old css */
.page-wrap {
    width: 100%;
    height: 100%;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
}

footer {
    //width: 100%;
    background-color: #8DC63F;
    //display: block;
    //float: left;
    clear: both;
    text-align:center;
}

.footer-top { 
    //width: 100%; 
    //float: left;
    padding-top:10px; 
    color: #FFFFFF;
}

.footer-bottom {
    width: 100%;
    //text-align: center;
    //float: left;
    //display: inline-block;
}

.footermenu a {
    color: #FFFFFF;
    //float: left;
    font-size: medium;
    //list-style-type: none;
    text-decoration: none;
    padding-left: 10px;
    padding-right: 10px;
}

.footermenu li {
    //width: auto;
    //float: left;
    //text-align: center;
    list-style-type: none;
    //text-decoration: none;
}
.footermenu {
    //text-decoration: none;
    //width: auto;
    //text-align: center;
}

Upvotes: 0

mms27
mms27

Reputation: 826

You should add display: inline-block to .footermenu
Example...

Upvotes: 1

ekans
ekans

Reputation: 1714

you need to change your footer menu css 

.footermenu {
    text-decoration: none;
    width: 266px;
    margin: 0 auto;
    text-align: center;
}

fiddle : http://jsfiddle.net/dT6sC/4/

Upvotes: 0

Related Questions