Centering Menu html/css

Question

I want to center my menu made with html/css but I have no idea how should I do it, I've searched but I can't seem to find the answer I show you the menu and the desired menu:

https://i.stack.imgur.com/8Mgwy.jpg -> https://i.stack.imgur.com/T9HnZ.jpg

This is my html and css code:

<div id='cssmenu'>
        <ul>
            <li class='active'><a href='index.html'><span>Home</span></a></li>
            <li><a href='#'><span>Products</span></a></li>
            <li><a href='#'><span>About</span></a></li>
            <li><a href='#'><span>Contact</span></a></li>
        </ul>

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  font-family: Corbel;
}
#cssmenu {
  width: auto;
  height: 59px;
  padding-bottom: 4px;
}
#cssmenu.align-right {
  float: right;
}
#cssmenu.align-right ul li {
  float: right;
  margin-right: 0;
  margin-left: 4px;
}
#cssmenu.align-right ul li:first-child,
#cssmenu.align-right ul li:first-child > a {
  border-bottom-right-radius: 3px;
}
#cssmenu #bg-one,
#cssmenu #bg-two,
#cssmenu #bg-three,
#cssmenu #bg-four {
  position: absolute;
  bottom: 0;
  width: 100%;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
}
#cssmenu #bg-one {
  height: 10px;
  background: #0f71ba;
}
#cssmenu #bg-two {
  height: 59px;
  z-index: 2;
  background: url('imgs/menuBG.png');
}
#cssmenu #bg-three {
  bottom: 4px;
  height: 55px;
  z-index: 3;
  background: #222222;
  background: -moz-linear-gradient(top, #555555 0%, #222222 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #555555), color-stop(100%, #222222));
  background: -webkit-linear-gradient(top, #555555 0%, #222222 100%);
  background: -o-linear-gradient(top, #555555 0%, #222222 100%);
  background: -ms-linear-gradient(top, #555555 0%, #222222 100%);
  background: linear-gradient(to bottom, #555555 0%, #222222 100%);
}
#cssmenu #bg-four {
  bottom: 4px;
  height: 55px;
  z-index: 4;
  background: url('imgs/menuBG.png');
}
#cssmenu ul {
  height: 59px;
}
#cssmenu ul li {
  float: left;
  margin-right: 4px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  z-index: 5;
}
#cssmenu ul li a {
  padding: 24px 30px 20px 30px;
  margin-bottom: 4px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  color: #eeeeee;
  font-size: 15px;
  text-decoration: none;
}
#cssmenu ul li:first-child,
#cssmenu ul li:first-child > a {
  border-bottom-left-radius: 3px;
}
#cssmenu ul li:hover,
#cssmenu ul li.active {
  background: #0f71ba;
  background: -moz-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3fa4f0), color-stop(100%, #0f71ba));
  background: -webkit-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
  background: -o-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
  background: -ms-linear-gradient(top, #3fa4f0 0%, #0f71ba 100%);
  background: linear-gradient(to bottom, #3fa4f0 0%, #0f71ba 100%);
  font-weight: bold;
}
#cssmenu ul li a:hover,
#cssmenu ul li.active > a {
  background: url('images/bg.png');
  color: #ffffff;
}

It's better to spend some time in a previous search before asking: possible duplicate of [how can I center this menu with CSS](http://stackoverflow.com/questions/14379879/how-can-i-center-this-menu-with-css) or [How do I center align horizontal
menu?](http://stackoverflow.com/questions/2865380/how-do-i-center-align-horizontal-ul-menu) — Fabrizio Calderan, Mar 28 '14 at 09:27

score 2 · Accepted Answer · answered Mar 28 '14 at 09:28

2

Very simply, can be done with:

#cssmenu{
   text-align:center;
}
#cssmenu ul, #cssmenu ul li{
   display:inline-block;
}

answered Mar 28 '14 at 09:28

SW4

69,876
20
132
137

if you're going to use this method then you'll need to comment out the white space between the li otherwise you'll get extra spacing – Pete Mar 28 '14 at 09:37
As the `li` are currently floated, the alternative would be to remove `,#cssmenu ul li` and add `overflow:hidden` to `#cssmenu` – SW4 Mar 28 '14 at 09:39

score 0 · Answer 2 · edited Mar 28 '14 at 09:34

0

You can use position:absolute and left: 30% But it is recommended to insert the DIV in another div with position:relative attribute.

Another solution is to use <center> tags.

edited Mar 28 '14 at 09:34

Fabrizio Calderan

120,726
26
164
177

answered Mar 28 '14 at 09:26

Mohammad

31
3
10

Presentational tags like `` are deprecated with modern doctypes and they are not recommended in 2014 – Fabrizio Calderan Mar 28 '14 at 09:34

score 0 · Answer 3 · answered Mar 28 '14 at 09:28

0

Try to add text-align: center; to #cssmenu and display: inline-block; to #cssmenu ul.

answered Mar 28 '14 at 09:28

Peter Tretyakov

3,380
6
38
54

score 0 · Answer 4 · answered Mar 28 '14 at 09:28

0

Try using display:inline-block for the ul li instead of float left

#cssmenu ul{
  text-align:center;
}

#cssmenu ul li{
  float:left; //remove this
  display:inline-block;
  margin-right:0;
}

answered Mar 28 '14 at 09:28

James

4,540
1
18
34

score 0 · Answer 5 · answered Mar 28 '14 at 09:29

    #cssmenu ul {
  height: 59px;
    text-align:center
}
#cssmenu ul li {
display:inline-block
  margin-right: 4px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  z-index: 5;
}

remove float from #cssmenu ul li elements,add display:inline-block. and add tex-align center to: #cssmenu

Centering Menu html/css

5 Answers5