Question

我在网上找到了一些免费的源代码，可以找到我喜欢的菜单吧。它带有自己的样式表，工作正常，但它在我现有的网站上增加了很多垂直对齐。我希望菜单栏和所有表格都集中在每个页面上 - 简单。但是由于这个新的样式表，一切都有点居中，但并不完全，有时它偏离中心。

我可以通过在各种元素中使用margin-left来解决任何页面，但是这很乏味，每当我添加一个菜单项，或者并排放置2个表时，水平对齐全都搞砸了。我正在寻找一种简单，通用的方式来中心我的菜单栏和表格，以便在添加或删除菜单项目，或者表格更宽或并排放置时，所有居中都保持正确。

首先，视觉：

enter image description here

如上所述，只有在逐页更改样式并在每页上以不同方式调整样式时，我才能完美地对齐所有内容。我正在寻找全球解决方案。

body标签的宽度设置为：

<body style="width:720px;margin: 50px auto">

菜单源说明我必须在身体上设置宽度，这是我以前从未在其他网页上做过的。如果我不这样做，所有的对齐都会消失。似乎不需要设置体宽似乎是理想的，我猜这会导致问题。

菜单栏的HTML如下所示：

<ul id="nav" style="margin-top:-95px">
    <li><img src="images/RefSlot_Menu.png" onclick="location.href='index.html'" title="RefSlot Home Page" style="cursor:pointer;width:119px;margin-right:78px;margin-left:10px"></li>
    <!--<li><a href="index.html" title="RefSlot Home Page" style="font-family:Collegiate;font-size:25px;color:#000000;margin-right:20px;margin-left:10px">RefSlot</a></li>-->
    <li><a href="Organization.php">Organization</a>
        <ul>
            <li><a href="AddUser.php">Create New Member</a></li>
            <li><a href="OrganizationUsers.php">Your Members</a></li>
            <li><a href="Sites.php">Sites</a></li>
            <li><a href="ArchivedGroups.php">Archived Groups</a></li>
        </ul>
    </li>
    <li><a href="javascript:addGroup()">Create Group</a></li>
    <li><a href="Profile.php">Profile</a></li>
    <li><a href="Contact.html">Contact Us</a></li>
</ul>

顶级UL上的CSS：

#nav {
    margin: 0;
    padding: 7px 6px 0;
    background: #777D85 url(images/gradient.png) repeat-x 0 -110px;
    line-height: 100%;

    border-radius: 2em;
    -webkit-border-radius: 2em;
    -moz-border-radius: 2em;

    -webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}

每个LI上的CSS：

#nav li {
    margin: 0 5px;
    padding: 0 0 8px;
    float: left;
    position: relative;
    list-style: none;
}

我可以做些什么来强制我的内容集中体现？目前我不得不在BODY或TABLEs等上调整margin-left，每页不同。提前谢谢。

工作示例：http://www.refslot.com/_stackdemo.html

Answer 1

将以下代码添加到您的css文件中：

body {
    margin: 0 auto;
}

或改变你的身体标签：

<body style="width: 720px; margin: 0 auto;">

使用CSS - 菜单栏，表格等将我页面上的所有内容都集中在一起

1 个答案: