2

我已经搜索和搜索，但我似乎无法找到解决问题的方法。我正在尝试将<div>标签的内容集中在我的文档正文中。它是一个移动站点，因此在各种不同的视口和设备上，左右边距必须相等。

这是我要居中的 div：

<div id="nav">
<a href="http://m.usci.westondev.com/healthcare-certificates-2/">Healthcare/a
<a href="http://m.usci.westondev.com/business-certificates-2/">Business</a><br />
<a href="http://m.usci.westondev.com/wellness-certificates-2/">Wellness</a><br />
<a href="http://m.usci.westondev.com/technology-certificates/">Technology</a><br />
<a href="http://m.usci.westondev.com/legal-certificates/">Legal</a><br />
<a href="http://m.usci.westondev.com/services-certificates-2/">Services</a>
</div>

我认为可行的 CSS 很简单：

#nav {
margin-right:auto;
margin-left:auto;
display:block;
text-align:center;
width:100%;
}

但是，这并不能解决问题。这个 div 嵌套在许多其他<div>标签中，我尝试将其{margin-right:auto, margin-left:auto}应用于所有标签，但似乎没有任何效果。

一定有什么我错过了，但我没有想法。

我正在处理的页面位于： http: //m.usci.westondev.com

4

2 回答 2

0

给你试图居中的 div 一个宽度。你所有的父 div 的宽度都是 100%，所以这个也是。

自动通过在您的宽度未占用的任何 LEFTOVER 空间左右留边来工作。所以如果你给你的导航一个宽度=它的内容，它会正确居中。

于 2013-02-20T18:39:55.800 回答
0

尝试使用 Chrome 开发者工具之类的工具进行调试。你会看到你的 A 标签占据了包含 div 的全部宽度。为它们设置宽度应该修复：

#page-container .page .content #nav a:link {width: 280px;}
于 2013-02-20T18:41:22.627 回答