css - 居中 在两个 div 内？

Question

似乎不适用于最新版本的 Chrome，但这是我的代码。

HTML

<div id="whole">
    <div id="top">
        <div id="logo">
            <center><a href="http://www.starworldhair.com"><img src="/images/starworldhair_logo.png" alt="Star World Hair Logo" width="350" /></a>

            </center>
        </div>
    </div>
    <br />
    <br />
    <div id="topMenuContainer">
        <ul id="topNav">
            <li class='nav_whatsnew'><a href="http://www.starworldhair.com">Home</a>

            </li>
            <li class="nav_whatsnew"><a href="/our-products/">Our Products</a>

            </li>
            <li class="remihair"><a href="/brazilian-hair/">Brazilian</a> 
                <!-- <ul><li class='text'><a href='/Catalog/catproduct/details?brandid=35'>ALEXANDER</a></li><li class='text'><a href='/Catalog/catproduct/details?brandid=48'>RARE</a></li><li class='text'><a href='/Catalog/catproduct/details?brandid=49'>BARE & NATURAL</a></li><li class='text'><a href='/Catalog/catproduct/details?brandid=5'>GODDESS</a></li><li class='text'><a href='/Catalog/catproduct/details?brandid=4'>GODDESS SELECT</a></li><li class='text'><a href='/Catalog/catproduct/details?brandid=13'>GODDESS BUMP</a></li>

 </ul> -->
            </li>
            <li class="weaves"><a href="/indian-hair/">Indian</a>

            </li>
            <li class="wigs"><a href="/peruvian-hair/">Peruvian</a> 
            </li>
            <li class="allbrands"><a href="/chinese-yaki-hair/">Chinese Yaki</a>

            </li>
            <li class='nav_whatsnew'><a href="/about">About</a>

            </li>
            <li class='nav_whatsnew'><a href="/contact">Contact</a>

            </li>
        </ul>
    </div>
</div>

这一切都在<div id="whole">代码中。

CSS是：

 #topMenuContainer {
     /*position: absolute;*/
     /*top: 152px;*/
     /*left: 330px;*/
     /*text-align: center;*/
     /*width: 1005px;*/
     /*height: 250px;*/
     border: 0px dotted rgb(255, 0, 0);
     display:block;
     z-index:200;
     /*-moz-box-shadow: 0px 4px 8px 0px #ccc;
-webkit-box-shadow: 0px 4px 8px 0px #ccc;
box-shadow: 0px 4px 8px 0px #ccc;*/
 }
 #topNav {
     /*list-style: none;*/
     /*padding: 0px;*/
     /*margin: 0;*/
     /*float: left;*/
     width: 100%;
     height:30px;
     margin-bottom: -30px;
     /*background: transparent;*/
 }
 #topNav li {
     float: left;
     display:block;
     height:28px;
     margin: 0;
     border:0px #FF0000 solid;
     padding: 0 0 0 0;
     position: relative;
     /*--Declare X and Y axis base for sub navigation--*/
     list-style:none;
     margin-left: 5px;
     margin-right: 5px;
 }
 #topNav li a {
     /*padding: 0px 0px;*/
     height:30px;
     width:100%;
     /*line-height:100%;*/
     display: block;
     text-decoration: none;
     /*text-indent: -3000px;*/
 }

上面的 JS Fiddle 再现。

如果您想查看该网站，请访问http://starworldhair.com/。尝试将顶部菜单与徽标居中。

Answer 1

添加这个：

#topNav { text-align:center }
#topNav li { float:none; display:inline-block }