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

标签 html css css-float center navbar

我正在尝试将导航栏居中,同时为较大的屏幕使用固定宽度。基本上我想让蓝色区域在网格上居中,而不是我不能让它离开左边缘。同时我需要左侧和右侧分别向左/向右浮动。

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;
}

最佳答案

如果你可以去掉 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>

关于html - 使用固定宽度时将导航栏居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29442984/

相关文章:

javascript - 如何使用 javascript 创建弹出页面

html - 我的媒体查询中的 CSS 代码被忽略

html - float 离开后 Div 出现问题

javascript - 内联 SVG 和 jQuery 选择

html - 是否可以使用视口(viewport)缩放来缩放桌面浏览器的 html?

javascript - Knockout 或其他 JavaScript 来添加/删除对象的属性

css - @font-face 未显示预期结果

html - 我在 bootstrap 中使用 select 标签,我使用 css 来改变选择框的背景

html - 像 CSS 布局一样的多列

css - IE6 float 元素环绕问题