background color and centering my logo in the middle of my navigation bar-CodePudding

        <!---LOGO IN MIDDLE-->
        
                  <style>
                  body{
                    width:100%;
                    height:100%;
                  }
                  img{
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    margin-top: 31px;
                  }
                  </style>
                  </body>
                  <body>
                <img src="./IMAGES/white logo.png" width="80" height="80" alt="logo">
                </body>
                </a>
              </div>

I'm having problems putting background color and centering my logo in the center of my navigation bar.

CodePudding user response：

Is that what are you looking for?

body{
  width:100%;
  height:100%;
}
.wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background-color: #000;
}
img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 31px;
}

<div ><img src="https://i.stack.imgur.com/G4Hku.jpg" width="80" height="80" alt="logo"></div>

CodePudding user response：

I made little changes on html :

<nav>
  <img src="https://www.freepnglogos.com/uploads/google-logo-png/google-logo-png-webinar-optimizing-for-success-google-business-webinar-13.png" alt="logo">
</nav>

CSS Code :

body{
 width:100%;
 height:100%;
}

nav{
  /* Add Background color in Navigation Menu */
  background:black;
  height:10vh;

  /* Align logo in center */
  display:flex;
  justify-content:center;
}

I hope my solution will solved your problem.