Question

我需要一些帮助。我有一个CSS下拉菜单，但我希望标题集中在所有屏幕尺寸，它将在中间，就像它卡在左边。

非常感谢任何帮助。

以下是一些HTML代码：

<div id='cssmenu'>
  <ul>
    <li><a href='events.html'><span>Events</span></a></li>
  </ul>

Answer 1

将此css替换为#cssmenu＆gt;的内容ul＆gt;利：

#cssmenu > ul > li {

    display:inline-block;

    margin-left: 15px;       /* This is when the drop down box appears */

    position: relative;

}

并将其添加到您的css代码中：

 #cssmenu > ul {
        text-align:center;
 }

这里是：http://jsfiddle.net/y4vDC/10/

Answer 2

您需要将li元素设为inline，然后在父元素上使用text-align将其置于中心位置：

#cssmenu ul {
  text-align:center;
}
#cssmenu ul li {
  display: inline;
}

为了使它们保持为inline，您需要从列表元素中删除浮点数。

http://jsfiddle.net/y4vDC/13/

Answer 3

您至少有两个简单的选择：

将ul设置为display:table和margin:auto; http://jsfiddle.net/y4vDC/11/
在父http://jsfiddle.net/y4vDC/12/

display:inline-block

text-align:center

如何使CSS下拉菜单居中

3 个答案: