使用固定宽度时将导航栏居中

Posted

技术标签:

【中文标题】使用固定宽度时将导航栏居中【英文标题】：Center a Navbar when using a fixed width 【发布时间】：2015-06-09 04:20:26 【问题描述】：

我正在尝试使导航栏居中，同时为较大的屏幕使用固定宽度。基本上我想把蓝色区域放在网格的中心，而不是我不能把它从左边缘移开。同时我需要左右两边分别浮动。

Photo Example

HTML

<div class="navbar">
<div class="navbar-left">
    <a href="#home" class="navbar-brand icon-material-radio-button-on"></a>
</div>
<div class="navbar-right">
    <a href="#work" class="navbar-arrow icon-material-arrow-forward"></a>
    <a href="#work" class="navbar-arrow icon-material-arrow-back"></a>
</div>
</div>

CSS

.navbar 
background-color: #f8f8f8;
position: fixed;
width: 100%;
max-width: 1140px;
z-index: 1;
font-size: 14px;
min-height: 64px;
list-style: none;
text-align: center;
float: none;


.navbar-brand 
float: left;


.navbar-arrow 
float: right;

【问题讨论】：

【参考方案1】：

如果你可以移除 position:fixed，那么你可以试试 margin:0 Auto; 喜欢这里

<html>
    <head>
        <style>
.navbar 
    background-color: #f8f8f8;
    width: 100%;
    max-width: 1140px;
    z-index: 1;
    font-size: 14px;
    margin:0 Auto;
    min-height: 64px;
    list-style: none;
    text-align: center;
    float: none;


.navbar-brand 
    float: left;


.navbar-arrow 
    float: right;

        </style>
    </head>
    <body>
        <div class="navbar">
            <div class="navbar-left">
                <a href="#home" class="navbar-brand icon-material-radio-button-on"></a>
            </div>
            <div class="navbar-right">
                <a href="#work" class="navbar-arrow icon-material-arrow-forward"></a>
                <a href="#work" class="navbar-arrow icon-material-arrow-back"></a>
            </div>
        </div>
    </body>
</html>

【讨论】：

是的，我需要在向下滚动页面时将导航栏固定在顶部。这确实有效，但导航栏会随之滚动。 你也可以试试：- .navbar background-color: #f8f8f8;宽度：100%；最大宽度：1140px； z-index：1；字体大小：14px；边距：0 自动；最小高度：64px；列表样式：无；文本对齐：居中；浮动：无；左：0；对：0；位置：固定；

以上是关于使用固定宽度时将导航栏居中的主要内容，如果未能解决你的问题，请参考以下文章

在固定导航栏下方定位“包装”div？

更改导航栏以居中标题折叠的屏幕宽度

在 Twitter Bootstrap 3 中为大屏幕居中固定顶部导航栏

css 浏览器导航栏如何将按钮平均放置

未使用 Twitter Bootstrap 修复导航栏内容时居中？

如何使导航栏项 CSS 居中