Center css navigation menu

Question

#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;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu {
  width: auto;
  border-bottom: 3px solid #47c9af;
  font-family: Raleway, sans-serif;
  line-height: 1;
}
#cssmenu ul {
  background: #ffffff;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right > ul > li > a {
  margin-right: 0;
  margin-left: -4px;
}
#cssmenu > ul > li > a {
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #444444;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: -4px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #ffffff;
}
#cssmenu > ul > li > a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}
#cssmenu > ul > li.active > a:after,
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li > a:hover:after {
  background: #47c9af;
}

<!doctype html>
<html lang=''>

<head>
  <meta charset='utf-8'>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="styles.css">
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  <script src="script.js"></script>
  <title>CSS MenuMaker</title>
</head>

<body>
  <center>
    <div id='cssmenu'>
      <ul>
        <li class='active'><a href='#'>Home</a>
        </li>
        <li><a href='#'>Products</a>
        </li>
        <li><a href='#'>Company</a>
        </li>
        <li><a href='#'>Contact</a>
        </li>
      </ul>
    </div>

</body>
<html>

It Displays to the left, I already make the text-align center, and display:inline but it's still not displaying, and I want it to insert in my container, my containers width is about 60% any help with this?

Create a jsFiddle or Codepen.io example (or paste in your HTML into your question) and someone will be able to help for sure. Right now, you've only provided 50% of the problem. — Karl Dawson, Jan 28 '16 at 16:21
Sir i already have the link http://codepen.io/anon/pen/YwLveW — Jericho Capuyan, Jan 28 '16 at 16:24
Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it **in the question itself**. Questions without a clear problem statement are not useful to other readers. See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). — j08691, Jan 28 '16 at 16:27
Fixed grammar, capitalization and spelling. Moved code from codepen to snippet. When tidying code it its obvious that there is an unmatched in the html. Was at http://codepen.io/anon/pen/YwLveW — John Hascall, Jan 30 '16 at 17:21

score 0 · Answer 1 · answered Jan 28 '16 at 16:34

0

If you want to center your menu:

#cssmenu ul {
  display: table;
}

http://codepen.io/anon/pen/GodGXm

answered Jan 28 '16 at 16:34

Morfie

670
1
7
13

score 0 · Accepted Answer · answered Jan 28 '16 at 16:36

0

I amended your markup to read:

<div class="container">
  <div id='cssmenu'>
    <ul>
      <li class='active'><a href='#'>Home</a></li>
      <li><a href='#'>Products</a></li>
      <li><a href='#'>Company</a></li>
      <li><a href='#'>Contact</a></li>
    </ul>
  </div>
</div>

Then added a new class:

.container {
  width: 60%;
  margin: 0 auto;
}

answered Jan 28 '16 at 16:36

Karl Dawson

967
5
15

im new in css, what is the difference of class and id? – Jericho Capuyan Jan 28 '16 at 17:45
@KarlDawson The issue with this solution is that it will have allways 60% of the width of the container and it will need media queries for smaller resolutions. The LIs will be smaller and smaller without taking advantage of the available space.. please check my solution :) – miguelmpn Jan 28 '16 at 18:07
@JerichoCapuyan that is another question, please read this http://stackoverflow.com/questions/12889362/difference-between-id-and-class-in-css-and-when-to-use-it – miguelmpn Jan 28 '16 at 18:08

score 0 · Answer 3 · answered Jan 28 '16 at 18:05

I would do like this..

The difference is:

#cssmenu {
  text-align: center;
  line-height: 0;
}
#cssmenu ul {
  display: inline-block;
}

Here is my working example..

@import url(http://fonts.googleapis.com/css?family=Raleway);
#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;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: auto;
  border-bottom: 3px solid #47c9af;
  font-family: Raleway, sans-serif;
  line-height: 0;
}
#cssmenu ul {
  background: #ffffff;
  display: inline-block;
}
#cssmenu > ul > li {
  float: left;
}
#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right > ul > li > a {
  margin-right: 0;
  margin-left: -4px;
}
#cssmenu > ul > li > a {
  z-index: 2;
  padding: 18px 25px 12px 25px;
  font-size: 15px;
  font-weight: 400;
  text-decoration: none;
  color: #444444;
  -webkit-transition: all .2s ease;
  -moz-transition: all .2s ease;
  -ms-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  margin-right: -4px;
}
#cssmenu > ul > li.active > a,
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li > a:hover {
  color: #ffffff;
}
#cssmenu > ul > li > a:after {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 100%;
  height: 120%;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  content: "";
  -webkit-transition: all .2s ease;
  -o-transition: all .2s ease;
  transition: all .2s ease;
  -webkit-transform: perspective(5px) rotateX(2deg);
  -webkit-transform-origin: bottom;
  -moz-transform: perspective(5px) rotateX(2deg);
  -moz-transform-origin: bottom;
  transform: perspective(5px) rotateX(2deg);
  transform-origin: bottom;
}
#cssmenu > ul > li.active > a:after,
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li > a:hover:after {
  background: #47c9af;
}

<!doctype html>
<html lang=''>
<head>
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
   <script src="script.js"></script>
   <title>CSS MenuMaker</title>
</head>
<body>
<center>
<div id='cssmenu'>
<ul>
   <li class='active'><a href='#'>Home</a></li>
   <li><a href='#'>Products</a></li>
   <li><a href='#'>Company</a></li>
   <li><a href='#'>Contact</a></li>
</ul>
</div>

</body>
<html>

Center css navigation menu

3 Answers3