0

Hello I have a drop down menu which i need to centre in a div. The div is 970px wide and I would like the menu to be in the middle. Problem is no matter what I try I can get this to work.

<div id="menuwrapper">
    <ul class="menu" id="menu">
        <li><a href="#" >Home</a></li>
        <li><a href="#">Services</a>
            <ul>
                <li><a href="#">Flights</a></li>
                <li><a href="#">Car Hire</a></li>
                <li><a href="#">Hotel Arrangements</a></li>
                <li><a href="#">Ferries</a></li>
                <li><a href="#">Other Services</a></li>
            </ul>
        </li>
        <li><a href="#">About us</a></li>
        <li><a href="#">Why us</a></li>
        <li><a href="#">Frequently Asked Questions</a></li>
        <li><a href="#">Testimonials</a></li>
        <li><a href="#">Contact us</a></li>
    </ul>
</div>

and here is the css

#menuwrapper {
    height: auto;
    width: 970px;
    position: relative;
    float: left;
    padding: 0px;
    margin: 0px;
    clear: both;
}

ul.menu {
    list-style:none;
    margin:0;
    padding:0;
    font: 16px/20px 'TitilliumText22LLight', Arial, sans-serif;
    text-shadow: #638517 1px 1px 1px;
    color:#FFF;
}

ul.menu * {
    margin:0;
    padding:0
}

ul.menu a {
    display:block;
    color:#FFF;
    text-decoration:none
}

ul.menu li {
    position:relative;
    float:left;
    margin-right:0px;
    border-right-style:none;
    border-left-style:none;
    height: 27px;
    border-top-style: none;
    border-bottom-style: none;
    background-image: url(menuslit.gif);
    background-repeat: repeat-y;
    background-position: left top;
    padding-top: 10px;
    padding-right: 6px;
    padding-bottom: 0px;
    padding-left: 6px;
}

ul.menu ul {
    position:absolute;
    top:37px;
    left:0;
    background:#3f3f3f;
    display:none;
    opacity:0;
    text-shadow: none;
    list-style:none;
}

ul.menu ul li {
    display:block;
    background-color:#3f3f3f;
    width: 200px;
    background-image: url(over2.gif);
    background-repeat: repeat;
    padding: 5px 0px 5px 5px;
    font: 14px/20px 'TitilliumText22LLight', Arial, sans-serif;
    height: auto;
}

ul.menu ul li:hover {
    background-image: url(over3small.gif);
    background-repeat: repeat;
}

ul.menu ul ul {
    left:205px;
    top:-0px
}

ul.menu .menulink {
    border:0px solid #aaa;
    padding:10px 7px 0px;
    font-weight:normal;
    width:auto;
    height:30px;
}

ul.menu li:hover {
    background-image: url(over3.gif);
    background-repeat: repeat;
    border-left-width: 0px;
    border-left-style: solid;
    border-left-color: #b7b7b7;
    text-shadow: none;
    background-position: left top;
}

ul.menu .sub {
    background:#d1d1d1 url(sdsimages/arrow.gif) 190px 8px no-repeat
}

ul.menu .topline {
    border-top:0px solid #aaa
}
4

3 回答 3

2

我认为这：

#menuwrapper {text-align: center;}
ul.menu {display: inline-block;}

可能会这样做。

于 2013-06-14T14:11:38.070 回答
0

给 ul.menu 一个宽度和可扩展的边距：

ul.menu{
    width: 600px;
    margin: 0 auto;
}

“margin: 0 auto”意味着顶部和底部没有边距，而右侧和左侧有“auto”边距......这意味着它将适合其容器。希望它有效！

于 2013-06-14T14:05:39.530 回答
0

这是一个很好的链接：

.container {
    width: 600px;
}

.list-centered {
    margin: 0 auto;
    width: -webkit-fit-content;
       width: -moz-fit-content;
            width: fit-content;
}

.list-centered li {
    float: left;
}

http://theamazingweb.net/2013/04/23/centered-fluid-width-navigation-with-floating-links-thanks-to-fit-content/

于 2013-06-14T14:17:47.127 回答