Home/ Questions/Q 8286555
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T11:48:35+00:00

I am trying to center a footer menu but it is not positioning correctly.

  • 0

I am trying to center a footer menu but it is not positioning correctly. I have tried a margin auto 0 which is working for the main container div, but doesn’t work on the footer. Please help. Thanks in advance.

html code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css.css" rel="stylesheet" type="text/css"/>
</head>

    <body>
        <div id="container">
            <p>stuff</p>
        </div>

        <div id="footer">
            <ul>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </div>

    </body>
</html>

css code

body {
    font-family: Arial;
    padding-bottom: 50px;
}

a, a:link, a:visited, a:active {
    text-decoration: none;
}

#container {
height: 300px;
width: 500px;
margin: 0 auto;
padding-bottom: 10px;
border: 5px solid #dbdbda;
}

/*footer*/
/*
#footer {
margin: 0 auto;
}
*/
#footer ul {
font-size: 10px;
list-style: none;
}

#footer li {
float: left;
}

#footer li a {
padding-left: 10px;
padding-right: 10px;
border-right: 1px solid #dbdbdb;
color: #323232;
}

#footer li a:hover {
color: #dbdbdb;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You can give display:inline-block to ul tag inside your footer and text-align:center to footer.

    This will help to be independent from number of li’s in footer. Otherwise, you must give width to your footer, which isn’t correct in this situation, because you can need to add some element to footer and changing width everytime isn’t nice solution.

    See updated jsfiddle

    • 0