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

Question

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

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

Answer 1

如果您可以删除 position:fixed，那么您可以尝试 margin:0 自动；喜欢这里

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

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

Center a Navbar when using a fixed width

html

css

css-float

center

navbar