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


148

我需要居中对齐水平菜单。
我尝试了各种解决方案,包括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中将文本居中还是在DIV中将UL居中?
乔普(Joop)

Answers:


130

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

前提很简单,基本上只涉及一个无宽度的浮动包装,该浮动包装会浮动到左侧,然后从屏幕上移到左侧的宽度位置。左:-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。但是它仍然会像这里这样溢出:homeafrika.com
Samia Ruponti 2012年

在该站点上实际上看不到任何溢出。我不确定您是否需要溢出:无论如何,尽管有点,但是由于它是用于水平溢出的,因此您可以随时尝试使用overflow-x:代替。 webchat.freenode.net/?nick=oerflowono&channels=#websites提供实时帮助。
reisio 2012年

1
该解决方案很好地使菜单居中,但是如果子菜单应在悬停时的某个固定位置打开,则注定要失败,因为position: relative主菜单的更改position:absolute了子菜单的行为。
cweiske 2012年

1
@reisio #buttonsOP的问题在哪里?在您的答复中有通知的地方,他必须使用它?如果您实际上并没有回答问题,而只是从某些链接中引用了一些非话题性的内容,那么如何才能接受和投票最多的答案呢?
trejder 2013年

90

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

    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>


2
同意@cweiske。只需使用text-align:以包含div居中即可为我解决了这个问题
-Kim Stacks

您只需要确保其中的所有文本都获得text-align: left;
Juan Mendes

好可爱 但是,ul在左侧具有默认填充,这意味着菜单将在中央右侧微移。您需要使用padding-left:0;从ul中删除默认填充。
迭代吉普赛

1
完全比接受的解决方案更好的答案是使用display:inline。不要使用float,其过于复杂。感谢您的见解@Robusto
Clain Dsilva

li中的文本对齐中心是不必要的
Aminah Nuraini

75

使用CSS3 flexbox。简单。

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

ul li {
  padding: 0 8px;
}

6
我肯定会推荐这种方法
caras

1
我也建议在所选答案上使用此方法。
mickburkejnr

我拥有你一杯啤酒!
Suyash Dixit

我不得不说,我从来没有使用过flex,也没有理由内容。出色的答案
Gman

伟大的答案beero
Ilyas karim

20

这是我找到的最简单的方法。我用了你的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>



2

试试这个:

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

1
以UL为中心。但是<LI>仍然浮动。我希望<LI>位于<UL>的中心。可能吗?
史蒂文

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的填充,宽度等的所有建议均无效,但以下建议有效。

margin:0 auto;与包含div上的全部有关。我希望这对某些人有帮助,并感谢已经建议结合其他方法使用此方法的其他所有人。

.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推荐标准定义id属性作为“名称”型 ...

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


1

我使用了display:inline-block属性:解决方案是使用宽度固定的包装器。在内部,ul块与内联块一起显示。使用此功能,ul就可以获取实际内容的宽度!最后保证金:0自动,以使此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

我为此使用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,因为内联表解决了with问题。我使用父div将文本居中对齐。这样即使在其他语言(翻译,宽度不同)中也看起来不错


0

@Robusto的解决方案是我尝试执行的最简单的解决方案,建议您使用它。我试图对无序列表中的图像做同样的事情以创建一个画廊……我用js摆弄着它。随时在这里尝试。

[它是使用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
ul{margin-left:33%}

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.