如何将下拉菜单置于中心位置？

Question

我试图将我的下拉菜单放在中心而不会影响菜单的功能。任何帮助深表感谢！谢谢！

#menu_container { padding: 1px 0; border-bottom: 1px solid #FFF; }
#menu_container ul { list-style-type: none; }
#menu_container ul li { float: left; font-size: 12px; position: relative; }
#menu_container ul li a { display: block; padding: 5px 15px; color: #808080; text-decoration: none; }
#menu_container ul li a:hover { background-color: #333; color: #808080; }
#menu_container ul li ul { display: none; position: absolute; top: 25px; left: 0; z-index: 150; border: 1px solid #ddd; }
#menu_container ul li ul li { width: 310px; float: none; }
#menu_container ul li ul li a { background-color: #fff; }

Answer 1

这取决于您的布局和页面结构。它可能就像为#menu_container分配固定宽度和自动边距一样简单：

#menu_container { width: 640px; margin: 0 auto; padding: 1px 0; border-bottom: 1px solid #FFF; }
/* Depending on your layout, you may also need to assign a full-width and/or relative positioning to a parent/container/wrapper element */

Answer 2

您可以通过添加

将#menu_container元素设置为居中

margin:0px auto;

为了使其正常工作，您还必须为容器设置宽度。