Html 下拉菜单中心对齐

这是密码。注意，这不是我的代码

HTML:

我的问题是，如何将“链接1”、“链接2”和“链接3”置于中心位置？在未来，我将添加更多的“链接4、5、6…”，因此我需要一个不需要“几乎居中”的解决方案，而是一个永久性的解决方案

你能帮帮我吗

这里有一个指向JSFIDLE的链接，您可以在其中看到代码的运行情况-

---

我的问候

在容器标记中使用文本对齐，并将列表设置为显示内联块：

---

有点老套，但确实奏效。

如果您不支持IE7及以下版本，我会将li上的float:left更改为display:inline块，然后将text align:center添加到父ul

.drop_menu {
    background:#005555;
    padding:0;
    margin:0;
    list-style-type:none;
    height:30px;
    text-align:center;
}
.drop_menu li { display:inline-block; }
.drop_menu li a {
   padding:9px 20px;
   margin-left:auto;
   margin-right:auto;
   display:block;
   color:#fff;
   text-decoration:none;
   font:12px arial, verdana, sans-serif;
}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
     left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
    text-align:left;
}
.drop_menu li:hover ul li a:hover { background:#005555; }

---

请参见此处：

是，很抱歉，我添加了宽度：自动和显示：内联块打开。drop\u Menu如果有选项，请将容器或容器的子容器居中，传统方法是为块元素设置

边距：0 auto

，或使用

文本对齐：居中

.drop_menu {
    background:#005555;
    padding:0;
    margin:0;
    list-style-type:none;
    height:30px;

}
.drop_menu li { float:left; }
.drop_menu li a {
    padding:9px 20px;
    margin-left:auto;
    margin-right:auto;
    display:block;
    color:#fff;
    text-decoration:none;
    font:12px arial, verdana, sans-serif;
}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }

.drop
 {
   text-align: center;
background:#005555;    
 }

.drop_menu {
    background:#005555;
    padding:0;
    margin:0;
    list-style-type:none;
    height:30px;
    text-align:center;
}
.drop_menu li { display:inline-block; }
.drop_menu li a {
   padding:9px 20px;
   margin-left:auto;
   margin-right:auto;
   display:block;
   color:#fff;
   text-decoration:none;
   font:12px arial, verdana, sans-serif;
}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
     left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
    text-align:left;
}
.drop_menu li:hover ul li a:hover { background:#005555; }