css - 你能帮我居中吗带有 CSS 的元素？

Question

我一直在为确实应该很容易的事情感到困惑，但是在徒劳的三个小时之后，我还没有解决它：

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

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

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

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

Answer 2

1写给style="text-align: center;"家长divul

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>

结束

Answer 3

最好的方法是：

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

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

并给 ul.menu 这个

margin:0 auto;
width:535px;

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

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

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

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

完整的 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>

Answer 4

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

Answer 5

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

.menu { 左：125px; }

125px左右应该不错