Image won't center in HTML-CodePudding

I fail to get the image (logo) in the center of the top bar!! I tried everything, I used align-self: center; , display:block; but no luck!! I don't know what i'm missing here!

codesandbox Link to the code for better viewing

The code:

    <html lang="en">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta name="keywords" content="مرحبا">
          <meta name="description" content="">
    
        <style>
          .mail {
            justify-content: center;
            align-content: center;
            align-items: center;
          }
          .headerContainer{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-content: center;
            align-items: center;
            align-self: center;
            margin-bottom: 50px;
            background-color: black;
          }
          .logo-image-cont{
            align-content: center;
            align-items: center;
            align-self: center;
          }
          .logo-image {
            width: 20%;
            height: 10%;
          }

    
        </style>
      </head>
      <body>
          <div >
            <header >
              <div >
    
                  <img
                    src="https://i.ibb.co/jwjBMnS/Kia-logo.png"
                    
                  />
   
                </a>
              </div>
            </header>

          </div>
      </body>
    </html>

CodePudding user response：

Add the following CSS:

.logo-image-cont {
  display: flex;
  justify-content: center;
}

See the forked snippet.

CodePudding user response：

Add

display: flex;
justify-content:center;

inside your logo-image-con div block

Link to corrected code

CodePudding user response：

add text-align: center; to .logo-image-cont

CodePudding user response：

Replace the css class with this

.logo-image-cont{
            align-content: center;
            align-items: center;
            align-self: center;
            display: flex;
          }
          .logo-image {
            width: 20%;
            height: 10%;
            margin: 0 auto;
          }

<html lang="en">
      <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta name="keywords" content="مرحبا">
          <meta name="description" content="">
    
        <style>
          .mail {
            justify-content: center;
            align-content: center;
            align-items: center;
          }
          .headerContainer{
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-content: center;
            align-items: center;
            align-self: center;
            margin-bottom: 50px;
            background-color: black;
          }
          .logo-image-cont{
            align-content: center;
            align-items: center;
            align-self: center;
            display: flex;
          }
          .logo-image {
            width: 20%;
            height: 10%;
            margin: 0 auto;
          }

    
        </style>
      </head>
      <body>
          <div >
            <header >
              <div >
    
                  <img
                    src="https://i.ibb.co/jwjBMnS/Kia-logo.png"
                    
                  />
   
                </a>
              </div>
            </header>

          </div>
      </body>
    </html>