centering anchor inside <li>-CodePudding

I started making a header, and I want to center the <a> tag inside the <li> tag. I tried changing the display, aligning the text center on the <a>, but it dosen't work. What do I have to do to center the inside of their li elements?

    * {
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
    }
    
    header div span {
      position: absolute;
      align-items: center;
    }
    
    li {
      padding: 10px;
    }
    
    .flex {
      display: flex;
    }
    
    .logo {
      width: 177px;
      height: 77px;
      padding-left: 20px;
      padding-top: 5px;
    }
    
    .headerbox {
      padding: 10px;
    }

<!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
      <meta charset="utf-8">
      <title>Fixus</title>
      <link rel="stylesheet" href="fixus.css">
    </head>
    <body>
      <header>
          <div >
            <img  src="images/fixus-logo.png" alt="fixuslogo">
            <ul >
              <li><a href="#" >AVALEHT</a></li>
              <li><a href="#" >AUTOKAUBAD</a></li>
              <li><a href="#" >RATTAPOED<</a></li>
              <li><a href="#" >AUTOTEENINDUS</a></li>
              <li><a href="#" >KLIENDIKAART</a></li>
              <li><a href="#" >FIXUS</a></li>
            </ul>
            <!-- <span >Eesti</span>
            <button  type="button" name="EPOOD">E-POOD</button> -->
          </div>
      </header>
      <!-- <div >
        <h2 >Fixus autokaubad -<br>
          valmis Sind teenindama üle Eesti</h2>
        </div> -->
    
      </body>
      </html>

CodePudding user response：

use flex and add align-items:center on your li's

* {
      margin: 0;
      padding: 0;
      list-style: none;
      text-decoration: none;
    }
    
    header div span {
      position: absolute;
      align-items: center;
    }
    
    li {
      padding: 10px;
      border:solid 1px red;
      display:flex;
      align-items:center;
    }
    
    .flex {
      display: flex;
    }
    
    .logo {
      width: 177px;
      height: 77px;
      padding-left: 20px;
      padding-top: 5px;
    }
    
    .headerbox {
      padding: 10px;
    }

<!DOCTYPE html>
    <html lang="en" dir="ltr">
    <head>
      <meta charset="utf-8">
      <title>Fixus</title>
      <link rel="stylesheet" href="fixus.css">
    </head>
    <body>
      <header>
          <div >
            <img  src="images/fixus-logo.png" alt="fixuslogo">
            <ul >
              <li><a href="#" >AVALEHT</a></li>
              <li><a href="#" >AUTOKAUBAD</a></li>
              <li><a href="#" >RATTAPOED<</a></li>
              <li><a href="#" >AUTOTEENINDUS</a></li>
              <li><a href="#" >KLIENDIKAART</a></li>
              <li><a href="#" >FIXUS</a></li>
            </ul>
            <!-- <span >Eesti</span>
            <button  type="button" name="EPOOD">E-POOD</button> -->
          </div>
      </header>
      <!-- <div >
        <h2 >Fixus autokaubad -<br>
          valmis Sind teenindama üle Eesti</h2>
        </div> -->
    
      </body>
      </html>

CodePudding user response：

Horizontal alignment. If you assign li a width then you can assign text-align: center too.

vertical alignment Add align-items: center; to the flex class.

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

header div span {
  position: absolute;
  align-items: center;
}

li {
  padding: 10px;  
  background: gray;  
  width:200px;
  text-align:center;
}

.flex {
  display: flex;
  gap: 10px;
  align-items: center;
}

.logo {
  width: 177px;
  height: 77px;
  padding-left: 20px;
  padding-top: 5px;
}

.headerbox {
  padding: 10px;
}

  <header>
      <div >
        <img  src="images/fixus-logo.png" alt="fixuslogo">
        <ul >
          <li><a href="#" >AVALEHT</a></li>
          <li><a href="#" >AUTOKAUBAD</a></li>
          <li><a href="#" >RATTAPOED<</a></li>
          <li><a href="#" >AUTOTEENINDUS</a></li>
          <li><a href="#" >KLIENDIKAART</a></li>
          <li><a href="#" >FIXUS</a></li>
        </ul>
        <!-- <span >Eesti</span>
        <button  type="button" name="EPOOD">E-POOD</button> -->
      </div>
  </header>
  <!-- <div >
    <h2 >Fixus autokaubad -<br>
      valmis Sind teenindama üle Eesti</h2>
    </div> -->