html - 将菜单与页面中心对齐

Question

给定以下菜单结构:

<div id="smoothmenu1" class="ddsmoothmenu">
    <ul>
        <li><a href="Default.aspx">Home</a></li>
        <li><a href="About.aspx">About Us</a></li>
        <li>
            <a href="#">Automotives</a>
            <ul>
                <li><a href="#">Masking Film</a></li>
                <li><a href="#">Promo Items</a></li>
                <li><a href="#">Accessories</a></li>
                <li><a href="#">External Protection</a></li>
                <li><a href="#">Internal Protection</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Packaging</a>
            <ul>
                <li>
                    <a href="#">Cardboard boxes</a>
                    <ul>
                        <li><a href="#">Big Boxes</a></li>
                        <li><a href="#">Small Boxes</a></li>
                        <li><a href="#">Medium Boxes</a></li>
                    </ul>
                </li>
                <li><a href="#">Paper bags</a></li>
                <li><a href="#">Polythene bags</a></li>
                <li><a href="#">Polythene layflat tubing</a></li>
                <li><a href="#">Postall bags & packaging</a></li>
                <li><a href="#">Protective Packaging</a></li>
                <li><a href="#">Refuse sacks</a></li>
                <li><a href="#">Retail</a></li>
                <li><a href="#">Strapping</a></li>
                <li><a href="#">Tapes</a></li>
            </ul>
        </li>
        <li>
            <a href="#">Eco Friendly</a>
            <ul>
                <li><a href="#">Recycled bags</a></li>
                <li><a href="#">Degradable bags</a></li>
                <li><a href="#">Random bags</a></li>
                <li><a href="#">Cotton bags</a></li>
                <li><a href="#">Compostable bags</a></li>
            </ul>
        </li>
        <li><a href="Design.aspx">Design Service</a></li>
        <li><a href="Contact.aspx">Contact Us</a></li>
        <li><a href="Offers.aspx">Offers</a></li>
    </ul>
    <br style="clear: left" />
</div>

所有菜单按钮看起来都很棒，但它们在容器中左对齐。我不知道如何让它们在菜单栏中居中，这样无论浏览器窗口有多宽，它们总是位于中间。

相关CSS是:

.ddsmoothmenu {
    font: bold 12px Verdana;
    background: #2773A0;
    /*background of menu bar (default state)*/
    width: 100%;
    background-image: url(../images/menuBG.jpg);
    z-index: 9999;
}

.ddsmoothmenu ul {
    z-index: 9999;
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li {
    position: relative;
    display: inline;
    float: left;
    z-index: 9999;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a {
    display: block;
    color: white;
    padding: 8px 10px;
    border-right: 1px solid #ffffff;
    color: #2d2b2b;
    text-decoration: none;
    padding: 10px 30px 10px 30px;
    font-size: 18px;
    font-family: Arial;
    font-weight: normal;
    z-index: 9999;
}

* html .ddsmoothmenu ul li a {
    /*IE6 hack to get sub menu links to behave correctly*/
    display: inline-block;
    z-index: 9999;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited {
    color: white;
}

.ddsmoothmenu ul li a.selected {
    /*CSS class that's dynamically added to the currently active menu items' LI A element*/
    background: #2773A0;
    color: white;
    z-index: 9999;
}

.ddsmoothmenu ul li a:hover {
    background: #4FA2D2;
    /*background of menu items during onmouseover (hover state)*/;
}

    /*1st sub level menu*/
.ddsmoothmenu ul li ul {
    position: absolute;
    left: 0;
    display: none;
    /*collapse all sub menus to begin with*/
    visibility: hidden;
    z-index: 9999;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li {
    display: list-item;
    float: none;
    background: #2773A0;
    /*background of menu items (default state)*/
    z-index: 9999;
    border-right: 0px;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul {
    top: 0;
    border-right: 0px;
    z-index: 9999;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a {
    font: normal 13px Verdana;
    width: 200px;
    /*width of sub menus*/
    padding: 10px;
    margin: 0;
    border-right: 0px;
}

    /* Holly Hack for IE \*/
* html .ddsmoothmenu {
    height: 1%;
} /*Holly Hack for IE7 and below*/


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass {
    position: absolute;
    top: 17px;
    right: 7px;
}

.rightarrowclass {
    position: absolute;
    top: 14px;
    right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    background: silver;
    z-index: 89;
}

.toplevelshadow {
    /*shadow opacity. Doesn't work in IE*/
    opacity: 0.8;
    z-index:89;
    filter:alpha(opacity=80);
}

Answer 1

好了，现在停止使用表格进行布局。这项技术属于历史的废纸篓。 Go educate yourself on why你真的不应该在这里使用表格。现在介绍如何居中。看看这个jsfiddle:http://jsfiddle.net/ezsZb/

该技术基本上就是此处描述的:http://www.tightcss.com/centering/center_variable_width.htm 。没什么大不了的，这是一种相当常见的技术。

---

这个插件的代码很糟糕，所以我们只是在这里尝试一下 CSS 和 HTML。假设这个 HTML 结构:

<div id="smoothmenu1">
    <div id="wrapper">
        <ul id="innerul">
        ...
        </ul>
    </div>
    <br style="clear: left" />
</div>

使用此配置:

mainmenuid: "wrapper", //menu DIV id

并交换 CSS 样式:

#smoothmenu1 { /* This used to be .ddsmoothmenu */
  font: bold 12px Verdana;
  background: #414141; /*background of menu bar (default state)*/
  width: 100%;
}

#wrapper {
  position: relative;
  float: left;
  left: 50%;
}

#innerul {
  position: relative;
  left: -50%;
}

您将得到您需要的结果。请参阅:http://jsbin.com/anaho/ .

PS:考虑使用另一个插件。这个代码的质量非常很差，而且不太灵活。