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

Popular posts from this blog

formatting - SAS SQL Datepart function returning odd values -

c++ - Apple Mach-O Linker Error(Duplicate Symbols For Architecture armv7) -

php - Yii 2: Unable to find a class into the extension 'yii2-admin' -