Question 42823 in Html Question posted in
Some basic documentation can be found here.

Can't get justify-content to work on my header links – Html

I want the name logo to be on the left and the links to be in the center of the header, but for some reason I can’t make these settings.

justify-content only works when I add it to the header, however I can’t configure the logo on the left and links in the center.
I think it’s some problem with my classes, please help me to figure it out

body {
  margin: 0;
}

header {
  display: flex;
  width: auto;
  height: 100px;
  align-items: center;
  background-color: black;
}

a:link {
  color: #d7b361;
  font-size: larger;
  padding: 50px 50px;
  list-style: none;
  text-decoration: none;
}

a:hover {
  color: white;
}

ul {
  margin: 0px;
  display: flex;
  justify-content: center;
}

.logo {
  padding-left: 20px;
  width: 250px;
  height: auto;
  justify-content: left;
}

.container {
  display: flex;
  justify-content: left;
}

.links {
  justify-content: center;
}
<header>

  <div class="container">
    <img class="logo" src="logo.png">
  </div>

  <div class="links">
    <nav>
      <ul>
        <li><a href="#">Sobre mim</a></li>
        <li><a href="#">Projetos</a></li>
        <li><a href="#">Contato</a></li>
      </ul>
    </nav>
  </div>

</header>
Tags:

3

Answers


  1. 0

    You should put all the navigation items inside nav tag, also you were using container class for the logo which automatically picks max-width: 1320px container css from the framewrok you are using in your project.

    I have adjusted your code, hope this helps. Also use margin-left: -px nagtive pixel property to adjest to center the links,

    If you don’t want to use negative property of the margin then you can add one more item or div inside the nav then use justify-content: space-between or justify-content: space-around as per your need to center everyting in the nav

    HTML

    <header>

        

         
            <nav>
                <div class="logo_container">
                    <img class="logo" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSoZO3Uai5V044q40trUMuaZW8AwbudAqk3RQ&usqp=CAU">
                    </div>
                <div class="links">  
                <ul>
                    <li><a href="#">Sobre mim</a></li>
                    <li><a href="#">Projetos</a></li>
                    <li><a href="#">Contato</a></li>
                </ul>
            </div>
            </nav>
        

    </header>

    CSS

    body{
    margin: 0;
}

header{
    width: auto;
    background-color: black;
}


nav
{
    display: flex;
    align-items: center;
}



a:link{
    color: #d7b361;
    font-size: larger;
    padding: 50px 50px;
    list-style:none;
    text-decoration: none;

    
}

a:hover{
    color:white;

}

ul{
  margin: 0px ;
  display: flex;
  justify-content: center;
}

li
{
    list-style: none;
}

.logo{
    padding-left: 20px;
    width: 250px;
    height: auto;
}



.links{
    width: 100%;
    margin: 0 0 0 -100px;
    justify-content: center;
}
    Login or Signup to reply.
  2. 0

    Since the links div container and logo div container are sibling elements, one of them has to step out of the normal rendering layout to avoid pushing the other. The solution below takes the logo div container out of the normal rendering flow, leaving the links div container to be unaffected by the logo and capable of being centered as if it were the only element in the header. This is achieved by making the logo div container absolutely positioned.

    According to the Mozilla docs, an absolutely positioned element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to its closest positioned ancestor…. The docs go on to say, Its final position is determined by the values of top, right, bottom, and left. Therefore, left: 0% is used to move the logo flush left. Since the logo div container needs a positioned ancestor, the <Header> tag is now a positioned tag–positioned as relative. See below.

    body{
    margin: 0;
}

header{
    display: flex;
    justify-content: center;
    position: relative;
    width: auto;
    height: 100px;
    align-items: center;
    background-color: black;
}

a:link{
    color: #d7b361;
    font-size: larger;
    padding: 50px 50px;
    list-style:none;
    text-decoration: none;
}

a:hover{
    color:white;

}

ul{
  margin: 0px;
  display: flex;
  justify-content: center;
}


.logo{
    padding-left: 20px;
    width: 250px;
    height: auto;
    justify-content: left;
}

.container {
    position: absolute;
    left: 0%;
}

/*
.links{
    justify-content: center;
}
*/
    Login or Signup to reply.
  3. 0

    ->Avoid fixed height for the header

    -> Apply padding on header tags to manage hight

    -> Remove the padding from the anchor tag and apply the display inline-block

    -> For spacing between links apply padding on the Li tag

    please refer to this link for a live demo to understand in detail.
    https://jsfiddle.net/yudizsolutions/s9y8cva2/

    body {
  margin: 0;
}

header {
  display: flex;
  width: auto;
  align-items: center;
  background-color: black;
  padding: 29px 0px;
}

a:link {
  color: #d7b361;
  font-size: larger;
  list-style: none;
  text-decoration: none;
  display: inline-block;
}

a:hover {
  color: white;
}

ul {
  margin: 0px;
  display: flex;
  justify-content: center;
  padding: 0px;
}

ul li {
  padding: 10px 30px;
}

.logo {
  padding-left: 20px;
  width: 250px;
  height: auto;
  justify-content: left;
}

.container {
  display: flex;
  justify-content: left;
}

.links {
  justify-content: center;
}
    <body>

  <header>

    <div class="container">
      <img class="logo" src="logo.png">
    </div>

    <div class="links">
      <nav>
        <ul>
          <li><a href="#">Sobre mim</a></li>
          <li><a href="#">Projetos</a></li>
          <li><a href="#">Contato</a></li>
        </ul>
      </nav>
    </div>

  </header>

</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search