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个回答
1
我使用了display:inline-block属性：解决方案是使用一个具有固定宽度的包装器。在内部，使用inline-block显示ul块。使用这种方法，ul只会占用实际内容的宽度！最后使用margin: 0 auto，将此inline-block居中 =)
/*ul wrapper*/
.gallery_wrapper{
        width:          958px;
        margin:         0 auto;
  }
/*ul list*/
ul.gallery_carrousel{
        display:        inline-block;
        margin:         0 auto;
}
.contenido_secundario li{
        float:          left;
}
0
ul{margin-left:33%}

在大屏幕上是一个不错的近似值。虽然不完美，但是是一个好的临时解决方案。

0

我使用jQuery代码来解决这个问题。（另一种解决方案）

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });
0
div {
     text-align: center;
}
div ul {
     display: inline-table;
}

使用ul作为inline-table可以解决宽度问题。我使用父级div将文本对齐到中心。 这样即使在其他语言（翻译，不同的宽度）中也看起来很好。

0

@Robusto的解决方案是我尝试做的最简单的，我建议你使用它。我试图为无序列表中的图像做同样的事情，以创建一个画廊...我制作了一个js fiddle来测试它。随意在这里尝试一下。

[它是使用Robusto的示例代码设置的]
HTML：

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
    </ul>
</div>


CSS：

div#centerDiv {
    width: 700px;
    text-align: center;
    border: 1px solid red;
}
ul.centerUL {
    margin: 2px auto;
    line-height: 1.4;
}
.centerUL li {
    display: inline;
    text-align: center;
}
0
我的解决方法是将 li 元素的 display 属性设置为 inline-flex。 

li {
  display: inline-flex;
}
<ul>
  <li>Item 1</li>
  <li>Item 1</li>
</ul>

您可以选择在 li 中添加 justify-content: center，并在 ul 中添加 padding: 0 来调整布局。

-2
.topmenu-design
{
    display: inline-table;
}

就这样！

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