html5 - Center a Navbar when using a fixed width -
html5 - Center a Navbar when using a fixed width -
i'm trying center navbar while @ same time using fixed width larger screens. want center bluish area on grid, instead cant off left edge. @ same time need left , right side float left/right respectively.
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; }
if can remove position:fixed, may seek margin:0 auto; here
<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>
html5 css3 css-float center navbar
Comments
Post a Comment