居中水平菜单中的各个菜单项目

我想居中个别菜单项目在这个水平CSS菜单中（从purecssmenu.com获得）。居中水平菜单中的各个菜单项目

他们目前浮到左边，我希望他们为中心

<div class="wrapper"> 
    <ul class="pureCssMenu pureCssMenum"> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu1</a></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu2</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> 
     <ul class="pureCssMenum"> 
      <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu1</a></li> 
      <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Submenu2</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> 
      <ul class="pureCssMenum"> 
       <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu3</a></li> 
       <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu4</a></li> 
       <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu5</a></li> 
      </ul> 
      <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> 
     </ul> 
     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>Menu3</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]--> 
     <ul class="pureCssMenum"> 
      <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu1</a></li> 
      <li class="pureCssMenui"><a class="pureCssMenui" href="#">Submenu2</a></li> 
     </ul> 
     <!--[if lte IE 6]></td></tr></table></a><![endif]--></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu4</a></li> 
     <li class="pureCssMenui"><a class="pureCssMenui" href="#">Menu5</a></li> 
    </ul> 
</div>

完整的HTML标记和CSS可在此的jsfiddle http://jsfiddle.net/28X9v/

的解决方案应该是跨浏览器兼容，应至少在ie7/8中工作

来源

2014-06-13 rogerb

我想这是你想要的答案。

http://jsfiddle.net/28X9v/5/

<span>....</span>

用于在代码对准。而已。

来源

2014-06-13 06:39:58

您可以修复链接并添加jsfiddle。我会接受你的回应。 – rogerb

只是想指出，@Nerranth的解决方案是建立在Era的建议之上的。多谢你们！ – rogerb

我刚刚注意到，随着您的更改，IE7将水平菜单渲染为垂直菜单。有什么建议么？在IE8 +和Chrome中运行良好 – rogerb

从您的li's删除浮动：Demo

ul.pureCssMenu, ul.pureCssMenu ul {text-align:center;} 
ul.pureCssMenu li { display:inline-block;}

来源

2014-06-13 06:12:58 Era

它扰乱了对齐，并使菜单凌乱 –

@Era - 感谢您的回应。我认为你的建议是有道理的，但它确实弄乱了垂直对齐。有关如何修复它的任何建议。 – rogerb

多数民众赞成那是因为跨度..这是不完整的CSS我猜..和图像也不存在..这可以通过添加跨度到'LI'中的每个文本解决..希望我很清楚。 – Era

哎视图测试此代码

.pureCssMenum li > ul.pureCssMenum li{ 
    float: left; 
} 
.pureCssMenum li > ul.pureCssMenum > li > ul.pureCssMenum{ 

    position:absolute; 
    top:40px; 
    } 
.pureCssMenum li > ul.pureCssMenum > li > ul.pureCssMenui li{ 
    float:none; 
    position:relative; 

}

http://jsfiddle.net/kisspa/LdXU5/

来源

2014-06-13 06:23:45 Kisspa

感谢您的回复。但不幸的是，这不是我想要的。 – rogerb

进行以下修改你的CSS

为了增加子菜单宽度以适应右移

ul.pureCssMenu ul { 
    width:110px; 
}

和更改页边距值菜单项右移

ul.pureCssMenu li { 
    display:block; 
    margin:2px 0px 2px 18px; 
    font-size:0px; 
}

您可以更改margin属性的最后一个参数去的元素更移向右侧。

这里是小提琴http://jsfiddle.net/28X9v/3/

来源

2014-06-13 06:27:40

感谢您的回复。这是一个很好的建议，但它仍然完全集中它。也许如果我调整宽度和边距值，我可以让它工作。 – rogerb

将18px更改为20px，将110px更改为115px –

居中水平菜单中的各个菜单项目

回答

相关问题