i trying move anchor tags in navigation center of bar, how can make anchors remain fixed , not change position in different screens? code below:
html code
<nav class = "nav-main" id = "navmain"> <ul> <li> <a href = "#" class = "nav-item"> home</a> </li> <li> <a href = "#" class = "nav-item">about </a> </li> <li> <a href = "#" class = "nav-item">portfolio </a> </li> <li> <a href = "#" class = "nav-item">services </a> </li> <li> <a href = "#" class = "nav-item">contact </a> </li> </ul> </nav> css
.nav-main { width:100%; background-color: #222; height:70px; color:#fff; } .nav-main .logo{ float:left; height:40px; padding:15px 30px; font-size: 1.4em; line-height: 40px; } .nav-main > ul { margin:0; float:left; list-style-type: none; } .nav-main > ul > li { float:left; padding-left: 10px; } .nav-main > ul > li > { text-decoration: none; text-align: center; padding-left:100px; } .nav-item { display:inline-block; padding:15px 20px; height:40px; line-height:40px; color:#fff; text-decoration:none; } .nav-item:hover { background-color:forestgreen; } js fiddle
https://jsfiddle.net/x45wqktz/
i used text-align : center no result. right on left side of bar.
add nav-main class property :
.nav-main { width:100%; background-color: #222; height:70px; color:#fff; display: flex; justify-content: center; } 