html - Css code for center navigation menu is not working in firefox -
my css code following:-
#nav { position: relative; display: block; margin: 0; background: #333; z-index: 1; border-bottom: 1px solid #666; font-weight: 600; font-family: helvetica, arial, sans-serif; font-size: 14px; -webkit-box-align: center; -webkit-box-pack: center; display: -webkit-box; } #desktop-nav .nav-item { display: block; padding: 0 20px; float: right; -webkit-transition: color 200ms linear; transition: color 200ms linear; } #desktop-nav .nav-item:hover, #desktop-nav .nav-item:active { opacity: 0.7; }
and html code is:--
<div id="nav"> <nav id="desktop-nav"> <a class="nav-item" href="#1">github</a> <a class="nav-item" href="#2">about</a> <a class="nav-item" href="#3">community</a> <a class="nav-item" href="#4">docs</a> </nav>
here,i use below code make center navigation menu..
-webkit-box-align: center; -webkit-box-pack: center; display: -webkit-box;
but working in google chrome..but not in firefox..i need cross browser compatiable code mozilla????
there multiple ways it, can either give div
text-align : center
css property, or put div
:
-webkit-box-align: center; -webkit-box-pack: center; -moz-box-align: center; -moz-box-pack: center; display: -webkit-box;`
Comments
Post a Comment