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.

4

4 回答 4

2

你有float元素。除非您的容器被视为块或内联块，否则浮动元素将不会遵循该居中。

要达到预期的结果，您需要执行类似于此示例中的操作。

通过添加容器、居中边距并在其上使用display: inline-block，#menu它们将像正常内容一样居中。请注意，这在 IE 中可能不起作用，在这种情况下，您应该添加一行*display: inline;.

示例| 代码

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;
}
于 2012-04-04T16:01:02.160 回答
1

如果您想在其父元素（在本例中为主体）内居中，请给您的菜单一个宽度。此外，删除您的浮动 - 如果您将其浮动到一个方向或另一个方向，它不会居中。

于 2012-04-04T15:56:11.917 回答
0

你需要给你一个宽度menu并删除float:left

例如。

#menu {
margin:0 auto;    
list-style:none;
padding:0;
border-top:1 solid #ccc;
border-left:1 solid #ccc;
border-bottom:1 solid #ccc;
width:900px;
display:block;
}
于 2012-04-04T16:01:10.617 回答
0

你可以给菜单一个宽度width: 400px;或者你想要的宽度。然后，您可以将左右边距设置为自动margin-left: auto; margin-right: auto;

于 2012-04-04T15:56:55.823 回答