Question

我进行了搜索和搜索，但似乎无法找到解决问题的方法。我试图将<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

Answer 1

给你想要以宽度为中心的div。所有的父div都有100％的宽度，所以这个也是。

自动工作方式是左右边距任何宽度不占用的LEFTOVER空间。因此，如果您给导航的宽度=其内容，它将正确居中。

Answer 2

尝试使用Chrome开发者工具等工具进行调试。你会看到你的A标签占据了包含div的整个宽度。设置宽度应该是：

#page-container .page .content #nav a:link {width: 280px;}

居中<div> </div>的内容

2 个答案: