Search code examples
htmlcsstextmenucenter

Center the Text of my Menu

I need some help centering my menu on html css This is my code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OMFGuys Official Website</title>
<link rel="shortcut icon" href="http://i.imgur.com/3k9U9Os.png">
</head>
<body background="Imgs/papBG.png">

<div id="header" align="center">
    <link rel="stylesheet" type="text/css" href="img.css" media="screen" />
    <img src="Imgs/banner.png" width="100%">
</div>

<div id='cssmenu'>
<link rel="stylesheet" type="text/css" href="menucss.css" media="screen" />
<ul>
   <li class='active'><a href='index.html'><span>Início</span></a></li>
   <li><a href='#'><span>Youtube</span></a></li>
   <li><a href='#'><span>Sobre Nós</span></a></li>
   <li><a href='#'><span>Contactos</span></a></li>
   <li class='last'><a href='#'><span>Loja do Fã</span></a></li>
</ul>
</div>

</body>

and the css file:

#cssmenu {
  float: right;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
#cssmenu ul {
  list-style-type: none;
  width: auto;
  position: relative;
  display: block;
  height: 33px;
  font-size: 12px;
  background: url(http://cssmenumaker.com/sites/default/files/menu/69/bg.png) repeat-x top left;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  border: 1px solid #000;
  margin: 0;
  padding: 0;
}
#cssmenu li {
  position: relative;
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}
#cssmenu li a {
  float: left;
  color: #A79787;
  text-decoration: none;
  height: 24px;
  padding: 9px 15px 0;
  font-weight: normal;
}
#cssmenu li a:hover,
#cssmenu .active {
  color: #fff;
  background: url(http://cssmenumaker.com/sites/default/files/menu/69/bg.png) repeat-x top left;
  text-decoration: none;
}
#cssmenu .active a {
  color: #fff;
  font-weight: 700;
}
#cssmenu ul {
  background-color: #629600;
}
#cssmenu li a:hover,
#cssmenu li.active {
  background-color: #7AB900;
}

This is the result I get: https://dl.dropboxusercontent.com/u/214940697/PAP/index.html But I wanted something like this: https://i.sstatic.net/aUwSy.jpg (did with Paint xD)

So yeah, I would be very grateful if anyone can help me

Solution

  • Make these changes.

    #cssmenu ul {
  text-align: center;  // Add this
}

#cssmenu li {
    //display: block;  // Take this out
    display: inline-block; // Use Instead
    //float: left;  //Take this out
 }