如何使用特定于站点的CSS来居中导航栏和徽标

Question

我一直在努力找出这个问题。它似乎是一个使用CSS的快速修复，但我似乎无法找到适当的CSS规则来进行更改。我想要将导航栏以及此网站的标题图像居中http://breespecific.co.nf

Answer 1

简短的回答是你有两个主要选择：

1. 定义要居中的项目的width或max-width，然后添加margin: auto;

2. 将项目置于居中display:inline-block;及其父容器text-align:center;

在这两种情况下，您尝试居中的项目都不应该有任何浮动，并且它们将相对于父级的宽度显示为居中。

在您的特定页面中，.navbar-header {text-align:center;float:none;}和#logo {display:inline-block;}应该处理徽标，#main-menu '{display: inline-block; float: none;}和.navbar-ex1-collapse {text-align:center;}应该完成您想要的内容（不要忘记从这些媒体查询中获取浮动信息。（

）

如果您想在响应式页面中使用其他方法，则很可能需要设置一个百分比max-width，然后margin:auto;。

Answer 2

从.navbar-header和.main-nav添加text-align:center移除浮动广告标题将居中，但导航需要其他规则，从float:left移除.main-menu li现在display:inline-block生效text-align:center，导航也会居中。

由于您没有提供小提琴，我无法发布代码示例，但实现起来非常简单。