Home/ Questions/Q 7743889
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T09:39:01+00:00

I’m pretty new to HTML and CSS. I’m making a menu bar horizontal and

  • 0

I’m pretty new to HTML and CSS. I’m making a menu bar horizontal and I can’t seem to align it to center of screen. I have tried margin:0 auto; and <body align=center> but neither seems to work.

Here is my code:

<html>
<head>

<style>

#menu {
margin:0 auto;
float:left;
list-style:none;
padding:0;
border-top:1 solid #ccc;
border-left:1 solid #ccc;
border-bottom:1 solid #ccc;
}

#menu li {
float:left;
background-color:#f2f2f2;
}

#menu li a {
display:block;
padding:10px 80px;
text-decoration:none;
color:#069;
border-right:1px solid #ccc;
font-weight:bold;
}   

#menu li a:hover {
color:#c00;
background-color:#fff;
}

</style>

</head>

<body>

<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">FAQs</a></li>
<li><a href="#">Donate</a></li>
</ul>

</body>
</html>

As you can see, I’m using margin:0 auto;, but it doesn’t work.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You have float elements. Floating elements will not follow that centering unless your container is treated as a block, or inline block.

    To reach the desired result, you’d want to do something like in this example.

    By adding a container, center margin and using display: inline-block on the #menu they will be centered like normal content. Note that this might not work in IE, in which case, you should add a line with *display: inline;.

    Example | Code

    HTML

    <div class='container'>
    <ul id="menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">Gallery</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">FAQs</a></li>
        <li><a href="#">Donate</a></li>
    </ul>
</div>

    CSS

    .container{
    text-align: center;
    width: auto;
    margin: 0 auto;
}

#menu {
    margin:0 auto;
    display: inline-block;
    list-style:none;
    padding:0;
    border-top:1 solid #ccc;
    border-left:1 solid #ccc;
    border-bottom:1 solid #ccc;
}

#menu li {
    float: left;
    background-color:#f2f2f2;
}

#menu li a {
    display:block;
    padding:10px 10px;
    text-decoration:none;
    color:#069;
    border-right:1px solid #ccc;
    font-weight:bold;
}   

#menu li a:hover {
    color:#c00;
    background-color:#fff;
}
    • 0