Question

我需要居中对齐水平菜单我尝试了各种解决方案，包括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才能完成此任务吗？

Answer 1

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

前提很简单，基本上只涉及一个无宽度的浮动包装，它浮动到左边，然后从屏幕移到左边的宽度位置：relative;左：-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>

Answer 2

这对我有用。如果我没有误解你的问题，你可以尝试一下。

    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>

Answer 3

使用CSS3 flexbox。简单。

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

ul li {
  padding: 0 8px;
}

Answer 4

这是我找到的最简单的方法。我用你的HTML。填充只是为了重置浏览器默认值。

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>

Answer 5

这是一篇很好的文章，介绍如何以一种非常坚固的方式实现它，没有任何黑客和完整的跨浏览器支持。适合我：

- ＆GT; http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

Answer 6

演示 - 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%;
}

这么干净。

Answer 7

试试这个：

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}

Answer 8

和你们这么多人一样，我一直在努力解决这个问题。解决方案最终与包含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;
}

Answer 9

这样做：

   <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;
}

Answer 10

我使用了display：inline-block属性：解决方案包括使用固定宽度的包装器。在内部，ul块具有用于显示的内联块。使用这个，ul只取实际内容的宽度！最后边距：0自动，以此为内联块=）

/*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;
}

Answer 11

一般来说，将黑色元素（如<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 */
}

......应该有用。

当不使用<!DOCTYPE>时，边缘情况是Internet Explorer6 ......甚至是其他IE。 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开头信（[A-Za-z]），可以遵循任意数量的字母，数字（[0-9]），连字符（“ - ”），下划线（“_”），冒号（“：”）和句号（ “”）。

Answer 12

@ Robusto的解决方案对于我想要做的事情来说是最简单的，我建议你使用它。我试图对无序列表中的图像做同样的事情来制作一个画廊......我做了一个js小提琴来愚弄它。随意try it here.

[它是使用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;
}

Answer 13

我使用jquery代码。（替代解决方案）

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });

Answer 14

div {
     text-align: center;
}
div ul {
     display: inline-table;
}

ul as inline-table修复了with问题。我使用父div将文本对齐到中心。这种方式即使在其他语言中也很好看（翻译，宽度不同）

Answer 15

ul{margin-left:33%}

在大屏幕上是一个不错的近似值。它不好，但是很好的修复。

Answer 16

对我有用的只是将 li 项的 display 属性设置为 inline-flex：

li {
  display: inline-flex;
}

<ul>
  <li>Item 1</li>
  <li>Item 1</li>
</ul>

您可以选择将 justify-content: center 添加到 li 中，并将 padding: 0 添加到 ul 以解决问题。

Answer 17

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

那一切！

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

17 个答案:

代码