footer menu not center aligned

Question

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

Take a look to this page, it might help http://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/ :) good luck ! edit : possible duplicate : http://stackoverflow.com/questions/8641251/how-do-i-center-list-items-inside-a-ul-element — David, May 06 '14 at 13:43

mms27 · Answer 1 · 2014-05-06T14:04:28.900

1

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

edited May 06 '14 at 14:04

answered May 06 '14 at 13:58

mms27

806
7
12

but even in this footermenu is not center aligning – user3449454 May 06 '14 at 14:04
Yeah, I'm pretty sure that it's centered :) – mms27 May 06 '14 at 15:26

score 0 · Answer 2 · answered May 06 '14 at 13:44

0

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/

answered May 06 '14 at 13:44

ekans

1,662
14
25

i will be adding more li items to it so i don't want to fix the width to 266px...any other way? – user3449454 May 06 '14 at 13:51
you can use a center tag inside your ul : `
`
– ekans May 06 '14 at 14:18

score 0 · Accepted Answer · answered May 06 '14 at 14:15

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;
}

footer menu not center aligned

3 Answers3

Linked