如何中心对齐水平 菜单？ 如何中心对齐水平 菜单？(How do I center ali

2019-05-10 11:03发布

站内文章 / 前端开发
70 0 0

我需要中心对齐水平菜单。
我已经尝试了各种解决方案，包括混合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>

UPDATE

我知道如何中心对齐ul的内div 。 可以使用Sarfraz的建议来完成。 但是，列表中的项目仍然飘然离开内ul 。

我是否需要Javascript功能来做到这一点？

Answer 1:

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

前提是简单和基本上只涉及一个浮动到左边，然后移离屏幕向左宽度位置的widthless浮子包装：相对; 左：-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:

下面是关于如何做一个漂亮的坚如磐石的方式好文章，没有任何黑客和全跨浏览器支持。 对我的作品：

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



Answer 6:

试试这个： 

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


Answer 7:

像这样做 ： 

   <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 8:

像你们这么多人，我一直在挣扎了一会儿。 该解决方案最终不得不与包括UL股利做。 上改变填充，宽度，在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;
}


Answer 9:

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

OMG清爽多了。



Answer 10:

一般而言居中黑电平元件（像的方式<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 */
}

... 应该管用。

边缘的情况是互联网Explorer6 ...或者不使用时甚至其他的IE <!DOCTYPE> IE6不正确使用对齐块级elemnts 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和名称标记必须以字母开头（[A-ZA-Z]）和之后可以是任何数量的字母，数字（[0-9]），连字符（ “ - ”），下划线（ “_”） ，冒号（ “：”），和句点（ “”）。



Answer 11:

我所使用的显示：直列块属性：该溶液在使用由具有固定宽度的包装。 内，与所述内联块用于显示的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 12:

使用jQuery代码这一点。 （替代溶液） 

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


Answer 13:

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

UL像内联表的问题修复。 我用父div来对齐文本中心。 这样它看起来甚至在其他语言好（翻译，不同的宽度）



Answer 14:

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


Answer 15:

ul{margin-left:33%}

是大屏幕体面的逼近。 它不是很好，但一个好脏修复。



Answer 16:

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

这一切！



文章来源: How do I center align horizontal
    menu?
标签： css xhtml menuitem
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~