How to align in the center a menu made in HTML + CSS Nav

Question

How to align in the center a menu made in HTML + CSS Nav

Navigation

#1 by (2 votes)

3

I try to align all shapes with text-align: center; but none works, and when I give space with left the sub-menus are misaligned!

* {
  margin: 0;
  padding: 0;
}

.menu {
  width: 100%;
  height: 60px;
  background-color: black;
  font-family: Roboto;
  box-shadow: 0px 0px 100px 20px;
}

.menu ul {
  list-style: none;
  position: relative;
}

.menu ul li {
  width: 150px;
  padding: 0px 10px;
  float: left;
  line-height: 30px;
}

.menu ul li a {
  text-align: center;
  font-size: 19px;
}

.menu a {
  padding: 15px;
  display: block;
  text-align: center;
  text-decoration: none;
  color: #4d4d4d;
}

.menu ul ul {
  background-color: black;
  position: absolute;
  visibility: hidden;
}

.menu ul ul li {
  float: none;
  border-bottom: solid 1px #262626;
}

.menu ul li:hover ul {
  visibility: visible;
}

.menu a:hover {
  transition: all 0.4s ease;
  color: white;
  text-shadow: 3px 3px 20px;
}

.menu ul ul li {
  background-color: #1a1a1a;
}

.menu ul ul a {
  font-size: 17px;
}

.menu ul ul li a:hover ul ul ul {
  visibility: visible;
}

<body>
  <nav class="menu">
    <ul>
      <li><a href="#">5</a></li>
      <li><a href="#">4</a>
        <ul>
          <li><a href="#">1</a></li>
        </ul>
      </li>
      <li><a href="#">3</a>
        <ul>
          <li><a href="#">3</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">1</a></li>
        </ul>
      </li>
      <li><a href="#">2</a>
        <ul>
          <li><a href="#">5</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">1</a></li>
        </ul>
      </li>
      <li><a href="#">1</a>
        <ul>
          <li><a href="#">5</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">1</a></li>
        </ul>
      </li>
    </ul>
  </nav>
</body>

html5 css

asked by anonymous 21.09.2018 / 23:40

1 answer

Read JSON and transform into Java list Error 400 when sending request to ESocial (C #)

score 2 · Accepted Answer

Remove the default padding from <ul> and <li> . Add the padding: 0; property in the .menu ul and .menu ul li classes. Do not use float: left because it prevents you from centering the menu items by aligning them to the left. Instead, set display: inline-block; to li and text-align: center; to the first ul of the menu.

Placing text-align: center; in ul parent, you do not need to put in children because they already inherit the property, avoiding repetition. In the CSS below I added comments on what was removed and what was added:

.menu ul{
text-align: center; /* adicionado */
list-style: none;
position: relative;
padding: 0; /* adicionado */
}

.menu ul li ul{
width: 100%; /* adicionado */
}

.menu ul li{
display:  inline-block; /* adicionado */
width: 150px;
padding: 0px 10px;
/*float: left;*/
line-height: 30px;
padding: 0; /* adicionado */
position: relative; /* adicionado */
}

.menu ul li a{
text-align: center;
font-size: 19px;
}

.menu a{
padding: 15px;
display: block;
/*text-align: center;*/
text-decoration: none;
color: #4d4d4d;
}

.menu ul ul{
background-color: black;
position: absolute;
visibility: hidden;
}

.menu ul ul li{
xxfloat: none;
display: block;
width: 100%;
border-bottom: solid 1px #262626;
}

.menu ul li:hover ul{
visibility: visible;
}

.menu a:hover{
transition: all 0.4s ease;
color: white;
text-shadow: 3px 3px 20px;
}

.menu ul ul li{
background-color: #1a1a1a;
}

.menu ul ul a{
font-size: 17px;
}

.menu ul ul li a:hover ul ul ul{
visibility: visible;
}

<nav class="menu">
        <ul>
            <li><a href="#">5</a></li>
            <li><a href="#">4</a>
                <ul>
                    <li><a href="#">1</a></li>
                </ul>
            </li>
            <li><a href="#">3</a>
                <ul>
                    <li><a href="#">3</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </li>
            <li><a href="#">2</a>
                <ul>
                    <li><a href="#">5</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </li>
            <li><a href="#">1</a>
                <ul>
                    <li><a href="#">5</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">1</a></li>
                </ul>
            </li>
        </ul>
    </nav>