你能帮我用 CSS 将 <ul> 元素居中吗？

Posted 2023-03-29

技术标签:

【中文标题】你能帮我用 CSS 将 <ul> 元素居中吗？【英文标题】：Can you help me center a <ul> element with CSS? 【发布时间】：2010-10-07 08:24:24 【问题描述】：

我一直在为一些应该很容易的事情感到困惑，但是经过三个小时的无果之后我还没有解决它：

一位朋友让我修复his WordPress website的模板，使水平导航菜单栏在页面上水平居中。他希望它紧贴红色部分的底部中间 - 然后它正好适合红页两侧的两个标志之间。

红色部分 (class="header") 将 text-align 设置为 center。这似乎足以确保标题和其下方的描述文本居中对齐，但由于某种原因，我无法使菜单（ul）与页面中心对齐。

有人愿意建议我做错了什么吗？为什么我不能让菜单居中？我需要在样式表中进行哪些更改才能使其正常工作？

【问题讨论】：

安德鲁发布了一个有效的答案，获得了 66 票，也许，只是也许你应该考虑接受他的答案？ 【参考方案1】：

要将一行块居中，您应该使用 inline-block：

ul.menu  display: block; text-align:center; 
ul.menu li  display: inline-block;

IE 不理解 inline-block，但如果你只为 IE 将其设置为 inline，它仍然会表现为 inline-block：

<!--[if lt IE 8]>
ul.menu li  display: inline 
<![endif]-->

【讨论】：

+1。但请注意，只有 IE before IE8 不理解 inline-block - 但 IE8 及更高版本似乎可以这样做。你还应该添加 ul.menu li float:none; 无需设置 display: block;对于 ul.menu 元素，因为默认情况下它已经被阻止了。【参考方案2】：

1 将style="text-align: center;" 写给ul 的父div

2 将style="display: inline-table;" 写入ul

2 将style=" display: inline;" 写入li

<div class="menu">
  <ul>
    <li>menu 1</li>
    <li>menu 2</li>
    <li>menu 3</li>
  </ul>
</div>

<style>
.menu  text-align:center; 
.menu ul  display:inline-table;
.menu ul li display:inline;
</style>

完成

【讨论】：

【参考方案3】：

最好的方法是：

将 ul 包装在一个新的 div id="topmenu" 或类似的东西中，然后给它以下样式

bottom:0;
position:absolute;
width:780px;

然后给 ul.menu 这个

margin:0 auto;
width:535px;

这里唯一的问题是您正在设置菜单列表的宽度，因此如果菜单项的宽度发生变化，也需要在 CSS 文件中进行更改（即，如果添加了新的菜单项。

更新：刚刚注意到您上面关于不手动设置宽度的评论。如果您愿意使用一点点 javascript，您可以将其粘贴在文档就绪块中并删除 width: 535px;

var sum = 0; jQuery('.menu').children().each(function()  sum += jQuery(this).outerWidth(); ); jQuery('.menu').css('width', sum + 30);

一旦页面加载，这会将 css 宽度属性设置为实际呈现的宽度，因此布局将起作用。

下面的完整 html：

<div id="header">
    <h1 class="blog-title"><a href="http://www.hootingyard.org/" accesskey="1">Hooting Yard</a></h1>
    <p class="description">A Website by Frank Key</p>
    <div id="topmenu">
        <ul class="menu">
        <li class="current_page_item"><a href="http://www.hootingyard.org/" title="Prose, etc">Prose, etc</a></li>      
        <li class="page_item page-item-533"><a href="http://www.hootingyard.org/archivepage" title="Archives">Archives</a></li>
<li class="page_item page-item-534"><a href="http://www.hootingyard.org/books" title="Books">Books</a></li>
<li class="page_item page-item-551"><a href="http://www.hootingyard.org/regarding-mr-key" title="Regarding Mr Key">Regarding Mr Key</a></li>
<li class="page_item page-item-1186"><a href="http://www.hootingyard.org/subscriptions" title="Subscriptions">Subscriptions</a></li>
        <li class="admintab"><a href="http://www.hootingyard.org/wp-login.php?action=register">Register</a></li>    
    </ul>
</div>
</div>

【讨论】：

【参考方案4】：

为 ul 指定的宽度 ul width:700px; margin:0 auto;

【讨论】：

【参考方案5】：

由于它是绝对定位的，你可以给它一个left属性：