css - 使用内容正文居中导航和标题

Question

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

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

score 0 · Accepted Answer

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

.container {
  width:777px;
}

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

在此处输入图像描述

score 0 · Accepted Answer

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

使用 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>

woops 代码标签在这里丢失

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

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

score 0 · Accepted Answer

如果您参考以下屏幕截图：

您会看到一切都排得满满当当，除了图标没有在居中计算的宽度。您显然希望图标具有宽度。

那么我们该怎么做呢？

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

i {

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

}

更新：

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

3 回答 3