How to center an ul inside the div?

Asked

Viewed 772 times

0

I can’t centralize a list in the center of the div. I was able to leave more or less centralized defining a width for ul, but it is not aligned with the corners. 

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-size: 1em;
}

#conteiner {
  width: 960px;
  margin: 0 auto;
  background: red;
}

#nav ul {
    list-style: none;
    margin: auto;
    text-align: center;
}

#nav li {
  float: left;
}

.clear {
  clear: both;
}
<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <link rel="stylesheet" href="_estilos/estilo.css">

  </head>
  <body>

    <div id="conteiner">
      <div id="nav">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
          </ul>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

html css

  • Centered horizontally, or vertically ? Here it’s perfectly aligned horizontally... you want to align the text within the element?

  • @hugocsl I want to center ul in the middle of the div, the li are in the right position, I just want t get td in the middle of the screen

2 answers

2

You can use flexbox to center the ul. Put it display: flex in the parent element of ul that would be the #nav. So you will define the parent element so that your children are flexible. Then just add justify-content: center so that you can align the flexible child elements in the center of the parent element.

#nav {
  display: flex;
  justify-content: center;
}


<!DOCTYPE html>
<html lang="pt-br" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>test</title>
    <style>
    
    * {
  margin: 0px;
  padding: 0px;
}

body {
  font-size: 1em;
}

#conteiner {
  width: 960px;
  margin: 0 auto;
  background: red;
}

#nav {
  display: flex;
  justify-content: center;
}

#nav ul {
    list-style: none;
    margin: auto;
    text-align: center;
}

#nav li {
  float: left;
}

.clear {
  clear: both;
}

    </style>
  </head>
  <body>

    <div id="conteiner">
      <div id="nav">
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
          </ul>
      </div>
      <div class="clear"></div>
    </div>
  </body>
</html>

  • 2

    could explain what was done? the answer seems good but only "add it" does not help who needs to understand how to solve the problem

  • 1

    Yes, I’ll edit the answer!

  • Simple and objective. Excellent answer.

2

Your problem is that the UL is 100% the width of NAV so if you have two elements 100% wide they are already aligned in each other. You need the UL has only the size of the content itself, so an option for this is to put display:inline-block in it for example. Thus, in addition to the UL stay with the size of the content itself you can use text-align: center in NAV to align the UL in the center of it.

inserir a descrição da imagem aqui

Code of the image above

* {
    margin: 0px;
    padding: 0px;
  }
  
  body {
    font-size: 1em;
  }
  
  #conteiner {
    width: 960px;
    margin: 0 auto;
    background: red;
  }
  #nav {
    text-align: center;
  }
  
  #nav ul {
      list-style: none;
      display: inline-block;
      vertical-align: top;
      border: 1px solid #000;
  }
  
  #nav li {
    float: left;
  }
  
  .clear {
    clear: both;
  }
<div id="conteiner">
    <div id="nav">
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
    <div class="clear"></div>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.