How to align the menu center horizontally?

html:

<div id="nav"> <ul> <li><a href="#portfolio">Портфолио</a></li> <li><a href="#education">Образование и Навыки</a></li> <li><a href="#about">Обо мне</a></li> <li><a href="#contact">Связаться</a></li> </ul> </div>

css:

 #nav ul li a { background-color: #FFF; position: fixed; width: 100%; height:47px; text-align: center; display: inline; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color:#000; vertical-align:middle; }

It looks like this during the test:

It looks like during the test

  • I edited the answer a little, I hope that I saved the meaning. - Nick Volynkin ♦
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

2 answers 2

Try this

 #nav{ background: #345; position: fixed; left: 0; top: 0; width: 100%; height:50px; text-align: center; display: inline; vertical-align:middle; } #nav a { text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 19px; color:#FFF; padding: 5px; } #nav a:hover { background: #FFF; color: #345; } ul { margin: 0; padding: 12px; list-style: none; } li { display: inline-block; } 
 <div id="nav"> <ul> <li><a href="#portfolio">Портфолио</a></li> <li><a href="#education">Образование и Навыки</a></li> <li><a href="#about">Обо мне</a></li> <li><a href="#contact">Связаться</a></li> </ul> </div>

  • thanks, almost what you need) how to make the background the entire width, and not just the buttons? - Valeryyy
  • @Valeryyy updated the answer - KYRAN

 #nav{ display: block; position: relative; } #nav ul{ width:300px; margin:0 auto; display:block; } #nav ul li a { background-color: #FFF; text-align: left; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #000; } #nav ul li{ list-style-type: none } 
 <div id="nav"> <ul> <li><a href="#portfolio">Портфолио</a></li> <li><a href="#education">Образование и Навыки</a></li> <li><a href="#about">Обо мне</a></li> <li><a href="#contact">Связаться</a></li> </ul> </div>

here