centering a menu

I don't understand why my menu is not centering. I tried everything from inline elements to margin: 0 auto; to align="center" and I can not get the menu to center. You can see it here http://jeremyspence.net78.net you have to scroll down all the way to see it, t only appears when it goes past the main menu. Here is some css

.scrollmenu {
    display:none;
    position: fixed;
    top: 0;
    text-align:center;
    margin: 0px auto;
    width: 1020px;
    z-index: 10000;
    padding:0;
}
.scrollmenu li{
    width: 200px;
    height: 75px;
    overflow: hidden;
    position: relative;
    float:left;
    background: #fff;
    -webkit-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
    margin-right: 4px;
    -webkit-transition: all 300ms linear;
    -moz-transition: all 300ms linear;
    -o-transition: all 300ms linear;
    -ms-transition: all 300ms linear;
    transition: all 300ms linear;
}
.scrollmenu li:last-child{
    margin-right: 0px;
}
.scrollmenu li a{
    text-align: left;
    width: 100%;
    height: 100%;
    display: block;
    color: #000;
    position: relative;
}
.scroll-icon{
    font-family: 'Symbols';
    font-size: 60px;
    color: #333;
    text-shadow: 0px 0px 1px #333;
    line-height: 80px;
    position: absolute;
    width: 100%;
    height: 50%;
    left: 0px;
    top: 0px;
    text-align: center;
}
.scroll-home{
    font-size: 30px;
    opacity: 0.8;
    text-align: center;
    position: absolute;
    left: 0px;
    width: 100%;
    height: 50%;
    top: 30%;
}
.scrollmenu li:nth-child(2):hover{
    background-color: #CEFECE;
}
.scrollmenu li:nth-child(3):hover{
    background-color: #CEFEFE;
}
.scrollmenu li:nth-child(4):hover{
    background-color: #CECEFE;
}
.scrollmenu li:last-child:hover{
    background-color: #FECEFE;
}

---

Just add this on your <ul class="scrollmenu"></ul> :

left: 50%;
margin-left: -510px;

or :

left: 0;
right: 0;

---

Looks like you're centering a div? <div> is a block element, by default. They're centered by using margins. You were close -- you need to make both the left AND right margin auto. margin-left:auto;margin-right:auto; . That will center it inside its parent element, which needs to be 100% width (block elements will expand to maximum width of parent by default). If it's an inline element, you can use text-align:center; on its parent (parent still needs to be 100% width), and that will do the trick.

---

In the HTML for your link, it looks like you need to set the position:fixed in the div above the ul menu. It looks like you're setting both position:fixed and trying to center at the same time. Get the parent div positioned in the fixed location, and then its child ul should be able to be centered via margin-left: auto; margin-right: auto; margin-left: auto; margin-right: auto; .

链接地址: http://www.djcxy.com/p/75812.html

上一篇: 如何对齐CSS中的div？

下一篇: 以菜单为中心