使用内容正文居中导航和标题答案

【问题标题】：Centering navigation and title with Content body使用内容正文居中导航和标题
【发布时间】：2013-01-26 23:09:01
【问题描述】：

我的网站导航以内容正文为中心，我有一段很长的时间。我希望导航以它而不是浏览器为中心，因为它看起来有点像内容主体的左侧并且看起来不太正确。

这可能吗。 http://www.bryananthonylewis.com/ 只是一个带有 Twitter Bootstrap 的简单博客。

【问题讨论】：

您是否同意“主页”图标是导致它偏离中心的原因？比如，它偏离中心那么多？
我也这么认为，但它似乎比图标要大得多。只是无休止地困扰着我。
删除图标，看看会发生什么。我们可以从那里出发。
您希望导航和内容位于浏览器的中心，还是将内容主体保持在当前位置并将导航对齐？现在，导航位于浏览器窗口的中心，内容主体略微偏离。
您为什么不直接将text-align: center; 或其他东西应用到您的#container，而不是定义一个特定的边距。然后您可以将text-align: left; 重新应用于您的模态。这样它们总是以容器为中心。

【解决方案1】：

我认为你在这里走错了路..

使用 chromeinspect 进行的快速扫描显示您使用 span8 offset 2 作为主要内容（容器元素中的第一个元素就在#modal-contact 下方），我认为您的主要内容有点偏右并且不是左边的标题。

我的快速修复：

删除偏移量，并通过以下方式获得该内容的 css 样式：

float: none;
margin: 0 auto; /*replace 0 for top margin*/

按照 Pankaj 的建议为容器设置宽度也可能会起作用，尽管您可能会以这种方式失去引导程序提供的动态宽度更改...没有检查，所以我可能在那部分错了

更新

另一个需要澄清的更新

删除以前的修复。在 #modal-contact 正下方的容器元素中添加一个包装 div，不像我认为的那样位于页面顶部...

<div class="container">
    <div class='row'>
        <div class="span8 offset2">
             blogcontent here
        </div>
    </div>
<div>

这里缺少代码标签

我觉得这应该做同样的事情。而且我也相信标题需要相同的修复。但我不是 100% 确定，所以请尝试评论它是否有效。本次更新基于官方文档

如果事情不起作用，请忘记我的建议并坚持有效的方法

【讨论】：

【解决方案2】：

如果你参考下面的截图：

您会看到所有内容都排列得很完美，除了图标没有在居中计算的宽度。您显然希望图标具有宽度。

那么我们该怎么做呢？

也许像这样在 i 标签中添加一些东西：

i {

  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 14px;
  vertical-align: text-top; 

}

更新：

上面的截图指出了问题所在。媒体查询后，网站进入平板模式，导航关闭。现在，回去工作吧！

【讨论】：

在桌面模式下是的。由于某种原因，它在平板电脑宽度的内容中留下了。我喜欢内容在平板模式下的位置，并且如果可能的话，希望导航处于相同的位置。除此之外，一切都排好了。

【解决方案3】：

您的标题没有问题。实际上，您下面的内容没有居中，这是因为在div.container 下方带有“span8 offset2 middle”类的不需要的div。通过完全删除该 div 并覆盖您的 css 文件中的 .container 来解决此问题

.container {
  width:777px;
}

在 chrome 的 web 检查器中进行相同编辑的示例

【讨论】：