当前位置： 文江博客话题详情

如何将水平
    居中对齐菜单？

发布于 2024-09-01 18:41:30 字数 1037 浏览 7 评论 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>

更新

我知道如何在div内居中对齐ul。这可以通过 Sarfraz 的建议来实现。 但列表项仍然在 ul 内向左浮动。

我需要 JavaScript 来完成这个任务吗？

原文

I need to center align a horizontal menu.
I've tried various solutions, including the mix of inline-block / block / center-align etc., but haven't succeeded.

Here is my code:

<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

I know how to center align the ul within the div. That can be accomplished using Sarfraz's suggestion.
But the list items are still floated left within the ul.

Do I need Javascript to accomplish this?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（17）

音栖息无 2024-09-08 18:41:30

来自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>

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

The premise is simple and basically just involves a widthless float wrapper that is floated to the left and then shifted off screen to the left width position:relative; left:-50%. Next the nested inner element is reversed and a relative position of +50% is applied. This has the effect of placing the element dead in the center. Relative positioning maintains the flow and allows other content to flow underneath.

Code

#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>

回复 原文
你爱我像她 2024-09-08 18:41:30

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

    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>  </li>
        <li><a href="http://www.amazon.com">Amazon 2</a>  </li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

This works for me. If I haven't misconstrued your question, you might give it a try.

    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>  </li>
        <li><a href="http://www.amazon.com">Amazon 2</a>  </li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

回复 原文
无畏 2024-09-08 18:41:30

使用 CSS3 弹性盒。简单的。

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

ul li {
  padding: 0 8px;
}

With CSS3 flexbox. Simple.

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

ul li {
  padding: 0 8px;
}
回复 原文
萤火眠眠 2024-09-08 18:41:30

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

This is the simplest way I found. I used your html. The padding is just to reset browser defaults.

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>

回复 原文
不美如何 2024-09-08 18:41:30

这是一篇很好的文章，介绍了如何以非常可靠的方式做到这一点，无需任何黑客攻击和完整的跨浏览器支持。对我有用：

--> http://matthewjamestaylor.com/blog/beautiful-css-居中菜单无黑客完全跨浏览器支持

Here's a good article on how to do it in a pretty rock-solid way, without any hacks and full cross-browser support. Works for me:

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

回复 原文
以歌曲疗慰 2024-09-08 18:41:30

试试这个：

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

Try this:

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}
回复 原文
他夏了夏天 2024-09-08 18:41:30

这样做：

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

Do it like this :

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

And the 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;
}
回复 原文
秋叶绚丽 2024-09-08 18:41:30

和你们很多人一样，我已经为此苦苦挣扎了一段时间。最终的解决方案与包含 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;
}

Like so many of you, I've been struggling with this for a while. The solution ultimately had to do with the div containing the UL. All suggestions on altering padding, width, etc. of the UL had no effect, but the following did.

It's all about the margin:0 auto; on the containing div. I hope this helps some people, and thanks to everyone else who already suggested this in combination with other things.

.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;
}
回复 原文
何以心动 2024-09-08 18:41:30

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

天哪，干净多了。

Demo - 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 so much cleaner.

回复 原文
枯叶蝶 2024-09-08 18:41:30

一般来说，将黑电平元素（如

    ）居中的方法是使用 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。 IE6 使用 text-align 错误地对齐块级元素。因此，如果您希望支持 IE6（或不使用 ），您的完整解决方案是...

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"< /code> 无效，因为 id 属性不能包含空格...？事实上，w3c 建议定义了 id 属性作为 'name' 类型。 ..

ID 和 NAME 令牌必须以
字母 ([A-Za-z]) 并可能跟随
由任意数量的字母、数字组成
([0-9])、连字符 (“-”)、下划线
（“_”）、冒号（“:”）和句点
（“。”）。

Generally speaking the way to center a black level element (like a <ul>) is using the margin:auto; property.

To align text and inline level elements within a block level element use text-align:center;. So all together something like...

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

... should work.

The fringe case is Internet Explorer6... or even other IEs when not using a <!DOCTYPE>. IE6 incorrectly aligns block level elemnts using text-align. So if you're looking to support IE6 (or not using a <!DOCTYPE>) your full solution is...

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

As a footnote, I think id="topmenu firstlevel" is invalid as an id attribute can't contain spaces... ? Indeed the w3c recommendation defines the id attribute as a 'name' type...

ID and NAME tokens must begin with a
letter ([A-Za-z]) and may be followed
by any number of letters, digits
([0-9]), hyphens ("-"), underscores
("_"), colons (":"), and periods
(".").

回复 原文
塔塔猫 2024-09-08 18:41:30

我使用了 display:inline-block 属性：解决方案包括使用固定宽度的包装器。在内部，ul 块和 inline-block 用于显示。使用这个，ul只需获取真实内容的宽度！最后 margin: 0 auto，使该内联块居中 =)

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

I used the display:inline-block property: the solution consist in use a wrapper with fixed width. Inside, the ul block with the inline-block for display. Using this, the ul just take the width for the real content! and finally margin: 0 auto, to center this 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;
}
回复 原文
猫弦 2024-09-08 18:41:30

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

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

i use jquery code for this. (Alternative solution)

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });
回复 原文
み格子的夏天 2024-09-08 18:41:30
div {
     text-align: center;
}
div ul {
     display: inline-table;
}

ul 作为内联表修复了 with 问题。我使用父 div 将文本居中对齐。
这样即使在其他语言中也看起来不错（翻译，不同的宽度）

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

ul as inline-table fixes the with issue. I used the parent div to align the text to center.
this way it looks good even in other languages (translation, different width)

回复 原文
冷了相思 2024-09-08 18:41:30

@Robusto 的解决方案对于我想做的事情来说是最简单的，我建议你使用它。我试图对无序列表中的图像做同样的事情来制作画廊......我做了一个 js 小提琴来玩弄它。欢迎在这里尝试一下。

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

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>  </li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>  </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;
}

@Robusto's solution was the simplest for what I was trying to do, I suggest you use it. I was trying to do the same thing for images in an unordered list to make a gallery... I made a js fiddle to fool around with it. Feel free to try it here.

[it was set up using robusto's sample code]
HTML:

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>  </li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>  </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;
}
回复 原文
夜巴黎 2024-09-08 18:41:30
ul{margin-left:33%}

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

ul{margin-left:33%}

Is a decent approximation on big screens. Its not good, but a good dirty fix.

回复 原文
动次打次papapa 2024-09-08 18:41:30

对我有用的只是将 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 中理顺事情。

What worked for me was just setting the li item's display property to inline-flex:

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

You may choose to add justify-content: center to the lis, and padding: 0 to the ul to straighten things out.

回复 原文
秉烛思 2024-09-08 18:41:30
.topmenu-design
{
    display: inline-table;
}

就这些！

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

That all!

回复 原文
~没有更多了~

关于作者

难得心□动

暂无简介

文章
评论
25 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

佚名

文章 0 评论 0

羁客

文章 0 评论 0

天天爱笑的徐老师

文章 0 评论 0

星

文章 0 评论 0

夏日落

文章 0 评论 0

隐诗

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文