logo标签列表

如何水平居中对齐 <UL> 菜单？

cssxhtmlmenuitem
149

我需要将一个水平菜单居中对齐。
我尝试了各种解决方案，包括使用inline-block/block/center-align混合等方法，但都没有成功。

这是我的代码：

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>

更新

我知道如何将 ul 居中对齐在 div 中。可以使用 Sarfraz 建议的方法来实现。 但是列表项仍然在 ul 内向左浮动。

我需要使用 JavaScript 来实现这个吗？

将每个LI中的文本居中，还是将UL居中放置在DIV中？ - Joop
17个回答
130

从http://pmob.co.uk/pob/centred-float.htm：

这个方法的前提很简单，基本上只需要一个没有宽度的浮动包装器，将其向左浮动并将其向左移动到屏幕外，使用width:position:relative;left:-50%。 接下来，反转嵌套的内部元素，并应用相对位置+50％。 这将使元素恰好位于正中间。 相对定位保持元素的流动性，并允许其他内容在其下方流动。

代码

#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/
<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>

9
请问您能否添加一些代码或者上下文信息到这个答案中以避免链接失效？ - Nightfirecat
解决方案很好，很抱歉在这么长的时间后才问这个问题，但是如果我有一个CSS下拉菜单怎么办？那么我就不能在父元素中使用overflow:hidden。但它仍然会像这里一样溢出：http://homeafrika.com。 - Samia Ruponti
1
该解决方案可以很好地使菜单居中，但是如果您有子菜单应在悬停时打开到某个固定位置，则会遇到问题，因为主菜单的position: relative会改变子菜单的position:absolute的行为。 - cweiske
1
@reisio，在OP的问题中有#buttons id吗？在你的答案中，有提到他必须使用它的提示吗？如果你实际上没有回答问题，只是引用了一些与主题无关的废话链接，那么这怎么能成为被接受和得到最高票数的答案呢？ - trejder
@trejder：不知道，也不在意；但它确实回答了问题，这可能是为什么它被接受和赞同的原因。 - reisio
显示剩余4条评论
94

这对我有效。如果我没有误解你的问题，那么你可以试试。

    div#centerDiv {
        width: 100%;
        text-align: center;
        border: 1px solid red;
    }
    ul.centerUL {
        margin: 2px auto;
        line-height: 1.4;
        padding-left: 0;
    }
    .centerUL li {
        display: inline;
        text-align: center;
    }
<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com">Amazon 1</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 2</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

3
我同意@cweiske的观点。对包含div使用text-align: center就解决了我的问题。 - Kim Stacks
你只需要确保任何文本内部都有 text-align: left; 即可。 - Ruan Mendes
太好了！但是，ul 元素默认在左侧有内边距，这意味着菜单被推到了中心的右侧。您需要使用 padding-left: 0; 去除 ul 元素的默认内边距。 - Iterative Gypsy
1
比被接受的解决方案更完美的答案，使用display:inline就可以解决问题。不要使用float，它过于复杂。感谢@Robusto的见解。 - Clain Dsilva
li 中的 text-align center 是不必要的。 - Aminah Nuraini
我在 .centerUL li 上添加了 display:inline-block;，对我来说效果很好。 - Robin Hossain
84

使用CSS3 flexbox。简单。

ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0 8px;
}
7
我会毫不犹豫地推荐这种方法。 - Caner
2
我也会推荐这种方法，而不是选择的答案。 - mickburkejnr
我必须说，我以前从未使用过flex，也没有用过justify-content。非常好的答案。 - Gman
需要使用 justify-content: center; 来解决这个问题。 - Vahid Amiri
添加flex-wrap:wrap以便在移动分辨率下可以多行显示。 - Zurd
20

这是我发现的最简单的方法。我使用了你的HTML代码。添加padding只是为了重置浏览器默认样式。

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline-block;
}
<div class="topmenu-design">
  <!-- Top menu content: START -->
  <ul id="topmenu firstlevel">
    <li class="firstli" id="node_id_64">
      <div><a href="#"><span>Om kampanjen</span></a>
      </div>
    </li>
    <li id="node_id_65">
      <div><a href="#"><span>Fakta om inneklima</span></a>
      </div>
    </li>
    <li class="lastli" id="node_id_66">
      <div><a href="#"><span>Statistikk</span></a>
      </div>
    </li>
  </ul>
  <!-- Top menu content: END -->
</div>

9
1
万一链接失效，你能否发布一份摘要？ - alex
2

试试这个：

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}
1
这可以使<ul>居中。但是<li>仍然向左浮动。我想让<li>在<ul>内居中。这可能吗？ - Steven
2
这样做就可以了：

像这样：

   <div id="footer">
        <ul>
            <li><a href="/1.html">Link 1</a></li>
            <li><a href="/2.html">Link 2</a></li>
            <li><a href="/3.html">Link 3</a></li>
            <li><a href="/4.html">Link 4</a></li>
            <li><a href="/5.html">Link 5</a></li>
        </ul>
   </div>

以下是CSS代码：

#footer {
    background-color:#ccc;
    height:39px;
    line-height:36px;
    margin:0 auto;
    text-align:center;
    width:950px;
}

#footer ul li {
    display:inline;
    font-family:Arial,sans-serif;
    font-size:1em;
    padding:0 2px;
    text-decoration:none;
}
2

像你们中的许多人一样，我已经苦苦挣扎了一段时间。最终的解决方案与包含UL的div有关。有关修改UL的填充、宽度等的所有建议都没有效果，但以下内容有效。

这全部取决于包含div上的margin:0 auto;。我希望这可以帮助一些人，并感谢已经建议结合其他事情的所有其他人。

.divNav
{
    width: 99%;
    text-align:center;
    margin:0 auto; 
}

.divNav ul
{ 
    display:inline-block; 
    list-style:none;
    zoom: 1;
}

.divNav ul li 
{
    float:left;
    margin-right: .8em;       
    padding: 0; 
}

.divNav a,  #divNav a:visited
{
    width: 7.5em;
    display: block; 
    border: 1px solid #000;
    border-bottom:none;
    padding: 5px; 
    background-color:#F90;
    text-decoration: none;
    color:#FFF;
    text-align: center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:1em;
}
2

演示 - http://codepen.io/grantex/pen/InLmJ

<div class="navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Others</a></li>
    </ul>
</div>


.navigation {
    max-width: 700px;
    margin: 0 auto;
}
.navigation ul {
    list-style: none;
    display: table;
    width: 100%;
}
.navigation ul li {
    display: table-cell;
    text-align: center;
}
.navigation ul li a {
    padding: 5px 10px;
    width: 100%;
}

哇，干净得多了。

1
一般来说，将黑色水平元素（如 <ul>）居中的方法是使用 margin:auto; 属性。
要使文本和内联级别元素在块级元素内对齐，请使用 text-align:center;。因此，全部内容大致如下...
ul {
    margin:auto;
}
ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

...应该可以工作。

边缘情况是Internet Explorer6...或者其他IE浏览器在不使用<!DOCTYPE>时。IE6会错误地对齐使用text-align的块级元素。因此，如果您想支持IE6（或不使用<!DOCTYPE>），您的完整解决方案是...

div.topmenu-design {
    text-align:center;
}
div.topmenu-design ul {
    margin:auto;
}
div.topmenu-design ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

作为脚注，我认为id="topmenu firstlevel"是无效的，因为id属性不能包含空格...？事实上，w3c recommendation defines将id属性定义为'name' type...

ID和NAME令牌必须以字母（[A-Za-z]）开头，并可以后跟任意数量的字母、数字（[0-9]）、连字符（“-”）、下划线（“_”）、冒号（“:”）和句点（“.”）。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接