html - Why wont my Navigation Bar Center? -
html - Why wont my Navigation Bar Center? -
why won't navigation bar center? i've tried < center> < /center>
on main .html text no avail.
class="snippet-code-css lang-css prettyprint-override"> #nav ul { text-align: center; list-style-type: none; } #nav li { float: left; } #nav a:link, a:visited { margin-left: auto; margin-right: auto; display: block; width: 120px; font-weight: bold; color: #ffffff; background-color: #21aeb8; text-align: center; padding: 4px; text-decoration: none; text-transform: uppercase; } #nav a:hover, a:active { background-color: #2bc1cc; }
class="snippet-code-html lang-html prettyprint-override"><link rel="stylesheet" href="style.css"> <head> <link href='http://fonts.googleapis.com/css?family=open+sans' rel='stylesheet' type='text/css'> <title>stats apps</title> </head> <body> <img src="logo.png" /> <center> <h1> biostatistics </h1> </center> <div id="nav"> <ul> <li><a href="#home">home</a> </li> <li><a href="#news">news</a> </li> <li><a href="#contact">contact</a> </li> <li><a href="#about">about</a> </li> </ul> </div>
floated elements not obey text-align: center;
rule.
if know number of links (li's) give ul specific width, utilize margin: 0 auto;
center entire list.
a improve alternative (in opinion) - utilize display: inline-block;
instead of float: left;
on li's.
there compatibility issues method however, back upwards ie8 , up, accounts 95% or more of average sites traffic. (depends on audience)
to accomplish this, alter below rule...
#nav li { float: left; }
to...
#nav li { display: inline-block; }
for more information... here link css3 wiki on floats
and here link css3 wiki on display: inline-block;
html css
Comments
Post a Comment