我需要居中一个宽度未知的CSS菜单.我找到了解决方案.通过将UL标签设置为display:table或display:inline-table,LI元素可以在中心对齐.
这个解决方案在IE中不起作用.是否有其他解决方案可以在IE中使用,只有HTML/CSS?
如果你想好好看看我的代码,我已经粘贴在这里.
这个怎么样?适用于IE6,IE7,Firefox.
标记:
CSS:
#menu-centered { background-color: #0075B8; padding: 10px; margin: 0; } #menu-centered ul { text-align: center; padding: 0; margin: 0; } #menu-centered li { display: inline; list-style: none; padding: 10px 5px 10px 5px; } #menu-centered a { font: normal 12px Arial; color: #fff; text-decoration: none; padding: 5px; background: #57a8d6; } #menu-centered a:hover { background: #5fb8eb; }
整个事情的关键基本上text-align: center;
是在
元素上做.你也从来没有真正想要做的事情display: table;
- 它只是hackish,因为你发现不适用于所有的浏览器.由于这种方式避免浮动,你也不需要在那里有清晰的元素,虽然你可以通过添加overflow: auto;
到那里删除它
.希望能帮助到你.