How center elements in a navbar? just html and css

Question

I need to align well my links inside navbar. Problem cum when I've added kia image inside

I don't know how change my css, maybe someone can help me? (I don't use bootstrap or similar, just css) my html:

.searchbar {
  border-radius: 25px;
  background: url('./assets/icon-ricerca.png') no-repeat scroll;
  background-size: 1vw, 1vw;
  background-position: 5% 50%;
  padding-left: 30px;
  left: 40vw;
  display: block;
  float: right;
  margin-right: 5vw;
}

.kia {
  height: 4vw;
  width: 4vw;
  /* padding-right: 12vw;
    padding-left: 2vw; */
}

div.alist {
  display: flex;
  justify-content: center;
  align-items: center;
}

.notification {
  float: right;
  top: 0%;
  padding: 0;
  border: none;
  background: none;
  margin-right: 1vw;
  padding-top: 10px;
  cursor: pointer;
  top: 1px;
  font-size: x-small;
}

.logout {
  float: right;
  top: 0%;
  padding: 0;
  border: none;
  background: none;
  margin-right: 5vw;
  cursor: pointer;
}

.logoutimg {
  height: 2vw;
  width: 2vw;
  float: right;
  top: 0%;
  padding: 0;
  border: none;
  background: none;
  margin-right: 5vw;
  cursor: pointer;
}

.firstnav {
  padding-bottom: 1vw;
}

nav {
  margin-left: 5vw;
  margin-right: 5vw;
  background-color: black;
  width: 87vw;
  height: 4vw;
}

.navbarelements {
  font-size: x-small;
}

a {
  color: white;
  font-size: small;
  padding-top: 90px;
  cursor: pointer;
  opacity: 0.5;
  text-decoration: none;
  margin-right: 2vw;
}

a:selection {
  color: blue;
}

.isDisabled {
  color: white;
  cursor: default;
  opacity: 0.5;
  text-decoration: none;
  font-size: x-small;
}

.label {
  color: white;
  cursor: default;
  opacity: 0.5;
  text-decoration: none;
  font-size: x-small;
}

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 25px;
  width: 20vw;
  float: left;
  display: flex;
  margin-left: 2vw;
  margin-top: 3vw;
}

.label2 {
  cursor: default;
  opacity: 0.7;
  text-decoration: none;
}

.label4 {
  display: flex;
  padding-top: 1vw;
  padding-right: 50vw;
  padding-left: 2vw;
  width: 37%;
}

.cards {
  margin-left: 15vw;
}


/* Add some padding inside the card container */

.container {
  padding-left: 3vw;
  padding-top: 2vw;
}

.iconcard {
  padding-left: 1vw;
  width: 1vw;
  height: 1vw;
}

.icondiv {
  float: right;
  padding-left: 4vw;
}

.cardgroup {
  background-color: rgb(239, 239, 239);
  transition: 0.3s;
  border-radius: 25px;
  width: 35vw;
  float: left;
  display: flex;
  margin-left: 2vw;
  margin-top: 3vw;
}

.cardgroupdiv {
  margin-left: 12vw;
  float: left;
  display: flex;
}

body {
  font: 16px/1.4 sans-serif;
}

.chart {
  border-radius: 1rem;
  box-shadow: 0 0.4rem 1rem #0005;
  padding: 1vw;
  background-color: #edf2f7;
  margin-left: 5vw;
  width: 27vw;
}

.chart-header {
  padding-top: 2px;
}

.chart-legends {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.chart-legend .pill {
  display: inline-block;
  background: var(--color);
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
}

.chart-bars {
  display: flex;
  gap: 2rem;
  height: 10vw;
  width: 27vw;
  justify-content: center;
  border-bottom: 1px solid #ccc;
  margin: 2rem 0;
}

.chart-bar {
  position: relative;
  width: 3rem;
  height: 100%;
  background: linear-gradient(0deg, var(--color) calc(var(--value) * 1%), transparent calc(var(--value) * 1%));
}

.chart-bar::after {
  counter-reset: value var(--value);
  content: counter(value)"%";
  position: absolute;
  left: 0;
  top: calc(100% + 1rem);
  width: 100%;
  text-align: center;
}

<div>
  <div class="firstnav">
    <form action="logout.html">
      <button class="logout"><img src="assets/icons8-uscita-50.png" alt="" srcset=""
                        class="logoutimg"></button>
    </form>
    <img src="./assets/icons8-notifiche-32.png" alt="" srcset="" class="logoutimg">
    <button class="notification">Notifiche</button>
    <input class="searchbar" type="text" name="" id="" placeholder="Cerca">
  </div>
  <br>
  <nav>
    <!---->
    <div class="alist">
      <img src="./assets/logo-kia.jpg" alt="" srcset="" class="kia">
      <a href="#" class="navbarelements">Dashboard</a>
      <a href="#" class="navbarelements">Piani</a>
      <a href="#" class="navbarelements">Piani extra</a>
      <a href="#" class="isDisabled">Archivio</a>
      <a href="#" class="navbarelements">Materiali</a>
      <a href="#" class="isDisabled">New</a>
      <a href="#" class="isDisabled">Anagrafiche</a>
      <a href="#" class="navbarelements">Campagne</a>
      <a href="#" class="navbarelements">Periodi</a>
      <a href="#" class="isDisabled">Report</a>
      <a href="#" class="isDisabled">Manuale</a>
      <a href="#" class="isDisabled">FAQ</a>
      <img src="./assets/icons8-utente-uomo-cerchiato-24.png" alt="" srcset="">
      <label class="label">Utente</label>
    </div>
  </nav>
  <br>
</div>
<div class="cards">
  <div class="card">
    <div class="container">
      <label class="label2">Periodo:<b style="color: red;">Aprile</b></label>
      <div class="icondiv">
        <img class="iconcard" src="./assets/icons8-giù-squadrato-50.png" alt="" srcset="">
        <img class="iconcard" src="./assets/icons8-menu-2-24.png" alt="" srcset="">
      </div>
      <div style="background-color: #edf2f7;">
        <hr>
        <label style="font-size: x-small; color: gray; "><b>Totale Spese Assegnate:</b></label>
        <hr>
      </div>
      <label style="font-size: x-small; color: gray;">Totale Spese Pianificate:</label>
      <hr>
      <label style="font-size: x-small; color: gray;">Totale Spese Approvate:</label>
      <div style="background-color: #edf2f7;">
        <hr>
        <label style="font-size: x-small; color: gray;"><b>Totale Spese Inserite:</b></label>
        <hr>
      </div>
      <label style="font-size: x-small; color: gray;">Totale Spese Approvate:</label>
      <hr>
      <label style="font-size: x-small; color: gray;">Totale Spese Rimborsate:</label>
      <hr>
    </div>
  </div>
  <div class="card">
    <div class="container">
      <label class="label2">Periodo:<b style="color: red;"></b></label>
      <div class="icondiv">
        <img class="iconcard" src="./assets/icons8-giù-squadrato-50.png" alt="" srcset="">
        <img class="iconcard" src="./assets/icons8-menu-2-24.png" alt="" srcset="">
      </div>
      <div style="background-color: #edf2f7;">
        <hr>
        <label style="font-size: x-small; color: gray; "><b>Totale Spese Assegnate:</b></label>
        <hr>
      </div>
      <label style="font-size: x-small; color: gray;">Totale Spese Pianificate:</label>
      <hr>
      <label style="font-size: x-small; color: gray;">Totale Spese Approvate:</label>
      <div style="background-color: #edf2f7;">
        <hr>
        <label style="font-size: x-small; color: gray;"><b>Totale Spese Inserite:</b></label>
        <hr>
      </div>
      <label style="font-size: x-small; color: gray;">Totale Spese Approvate:</label>
      <hr>
      <label style="font-size: x-small; color: gray;">Totale Spese Rimborsate:</label>
      <hr>
    </div>
  </div>
  <div class="card">
    <div class="container">
      <label class="label2">Campagna:<b style="color: red;">Q2</b></label>
      <div class="icondiv">
        <img class="iconcard" src="./assets/icons8-giù-squadrato-50.png" alt="" srcset="">
        <img class="iconcard" src="./assets/icons8-menu-2-24.png" alt="" srcset="">
      </div>
      <div style="background-color: #edf2f7;">
        <hr>
        <label style="font-size: x-small; color: gray; "><b>Totale Spese Assegnate:</b></label>
        <hr>
      </div>
      <label style="font-size: x-small; color: gray;">Totale Spese Pianificate:</label>
      <hr>
      <label style="font-size: x-small; color: gray;">Totale Spese Approvate:</label>
      <div style="background-color: #edf2f7;">
        <hr>
        <label style="font-size: x-small; color: gray;"><b>Totale Spese Inserite:</b></label>
        <hr>
      </div>
      <label style="font-size: x-small; color: gray;">Totale Spese Approvate:</label>
      <hr>
      <label style="font-size: x-small; color: gray;">Totale Spese Rimborsate:</label>
      <hr>
    </div>
  </div>
  <label class="label4" style="font-size:smaller; color: gray;">Nota Rimborso: il rimborso è stato
            approvato/negato per motivo ecc.</label>
</div>
<!--  2 card group   -->
<br>
<div class="cardgroupdiv">
  <article class="chart">
    <header class="chart-header">
      <h2 style="font-size: smaller;">Budget Aprile</h2>
    </header>
    <div class="chart-legends">
      <div class="chart-legend" style="--color:#a5a5a5; font-size: smaller;"><span class="pill"></span> Budget pianificato
      </div>
      <div class="chart-legend" style="--color:#ea0029; font-size: smaller;"><span class="pill"></span> Budget assegnato
      </div>
    </div>
    <div class="chart-bars">
      <div class="chart-bar" tabindex="0" style="--color:#a5a5a5; --value:80;"></div>
      <div class="chart-bar" tabindex="0" style="--color:#ea0029; --value:100;"></div>
    </div>
  </article>

  <article class="chart">
    <header class="chart-header">
      <h2 style="font-size: smaller;">Budget Maggio</h2>
    </header>
    <div class="chart-legends">
      <div class="chart-legend" style="--color:#a5a5a5; font-size: smaller;"><span class="pill"></span> Budget pianificato
      </div>
      <div class="chart-legend" style="--color:#ea0029; font-size: smaller;"><span class="pill"></span> Budget assegnato
      </div>
    </div>
    <div class="chart-bars">
      <div class="chart-bar" tabindex="0" style="--color:#a5a5a5; --value:65;"></div>
      <div class="chart-bar" tabindex="0" style="--color:#ea0029; --value:145;"></div>
    </div>
  </article>
</div>
<br>
<br>

```div.alist{display: flex; justify-content: center; align-items: center;}``` It will do it. — Md. Rakibul Islam, Jul 27 '23 at 22:44

Md. Rakibul Islam · Answer 1 · 2023-07-27T23:31:29.993

The problem was the padding top on the anchor tags.

a {
    /* padding-top: 90px; */
}

div.alist {
    display: flex;
    justify-content: center;
    align-items: center;
}

.searchbar {
  border-radius: 25px;
  background: url('./assets/icon-ricerca.png') no-repeat scroll;
  background-size: 1vw, 1vw;
  background-position: 5% 50%;
  padding-left: 30px;
  left: 40vw;
  display: block;
  float: right;
  margin-right: 5vw;
}

.kia {
  height: 4vw;
  width: 4vw;
  padding-right: 12vw;
    padding-left: 2vw;
}

div.alist {
  display: flex;
  justify-content: center;
  align-items: center;
}

.notification {
  float: right;
  top: 0%;
  padding: 0;
  border: none;
  background: none;
  margin-right: 1vw;
  padding-top: 10px;
  cursor: pointer;
  top: 1px;
  font-size: x-small;
}

.logout {
  float: right;
  top: 0%;
  padding: 0;
  border: none;
  background: none;
  margin-right: 5vw;
  cursor: pointer;
}

.logoutimg {
  height: 2vw;
  width: 2vw;
  float: right;
  top: 0%;
  padding: 0;
  border: none;
  background: none;
  margin-right: 5vw;
  cursor: pointer;
}

.firstnav {
  padding-bottom: 1vw;
}

nav {
  margin-left: 5vw;
  margin-right: 5vw;
  background-color: black;
  width: 87vw;
  height: 4vw;
}

.navbarelements {
  font-size: x-small;
}

a {
  color: white;
  font-size: small;
  /* padding-top: 90px; */
  cursor: pointer;
  opacity: 0.5;
  text-decoration: none;
  margin-right: 2vw;
}

a:selection {
  color: blue;
}

.isDisabled {
  color: white;
  cursor: default;
  opacity: 0.5;
  text-decoration: none;
  font-size: x-small;
}

.label {
  color: white;
  cursor: default;
  opacity: 0.5;
  text-decoration: none;
  font-size: x-small;
}

.card {
  /* Add shadows to create the "card" effect */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  transition: 0.3s;
  border-radius: 25px;
  width: 20vw;
  float: left;
  display: flex;
  margin-left: 2vw;
  margin-top: 3vw;
}

.label2 {
  cursor: default;
  opacity: 0.7;
  text-decoration: none;
}

.label4 {
  display: flex;
  padding-top: 1vw;
  padding-right: 50vw;
  padding-left: 2vw;
  width: 37%;
}

.cards {
  margin-left: 15vw;
}


/* Add some padding inside the card container */

.container {
  padding-left: 3vw;
  padding-top: 2vw;
}

.iconcard {
  padding-left: 1vw;
  width: 1vw;
  height: 1vw;
}

.icondiv {
  float: right;
  padding-left: 4vw;
}

.cardgroup {
  background-color: rgb(239, 239, 239);
  transition: 0.3s;
  border-radius: 25px;
  width: 35vw;
  float: left;
  display: flex;
  margin-left: 2vw;
  margin-top: 3vw;
}

.cardgroupdiv {
  margin-left: 12vw;
  float: left;
  display: flex;
}

body {
  font: 16px/1.4 sans-serif;
}

.chart {
  border-radius: 1rem;
  box-shadow: 0 0.4rem 1rem #0005;
  padding: 1vw;
  background-color: #edf2f7;
  margin-left: 5vw;
  width: 27vw;
}

.chart-header {
  padding-top: 2px;
}

.chart-legends {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}

.chart-legend .pill {
  display: inline-block;
  background: var(--color);
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
}

.chart-bars {
  display: flex;
  gap: 2rem;
  height: 10vw;
  width: 27vw;
  justify-content: center;
  border-bottom: 1px solid #ccc;
  margin: 2rem 0;
}

.chart-bar {
  position: relative;
  width: 3rem;
  height: 100%;
  background: linear-gradient(0deg, var(--color) calc(var(--value) * 1%), transparent calc(var(--value) * 1%));
}

.chart-bar::after {
  counter-reset: value var(--value);
  content: counter(value)"%";
  position: absolute;
  left: 0;
  top: calc(100% + 1rem);
  width: 100%;
  text-align: center;
}

<div>
  <div class="firstnav">
    <form action="logout.html">
      <button class="logout"><img src="assets/icons8-uscita-50.png" alt="" srcset=""
                        class="logoutimg"></button>
    </form>
    <img src="./assets/icons8-notifiche-32.png" alt="" srcset="" class="logoutimg">
    <button class="notification">Notifiche</button>
    <input class="searchbar" type="text" name="" id="" placeholder="Cerca">
  </div>
  <br>
  <nav>
    <!---->
    <div class="alist">
      <img src="./assets/logo-kia.jpg" alt="" srcset="" class="kia">
      <a href="#" class="navbarelements">Dashboard</a>
      <a href="#" class="navbarelements">Piani</a>
      <a href="#" class="navbarelements">Piani extra</a>
      <a href="#" class="isDisabled">Archivio</a>
      <a href="#" class="navbarelements">Materiali</a>
      <a href="#" class="isDisabled">New</a>
      <a href="#" class="isDisabled">Anagrafiche</a>
      <a href="#" class="navbarelements">Campagne</a>
      <a href="#" class="navbarelements">Periodi</a>
      <a href="#" class="isDisabled">Report</a>
      <a href="#" class="isDisabled">Manuale</a>
      <a href="#" class="isDisabled">FAQ</a>
      <img src="./assets/icons8-utente-uomo-cerchiato-24.png" alt="" srcset="">
      <label class="label">Utente</label>
    </div>
  </nav>
  <br>
</div>
<div class="cards">
  <div class="card">
    <div class="container">
      <label class="label2">Periodo:<b style="color: red;">Aprile</b></label>
      <div class="icondiv">
        <img class="iconcard" src="./assets/icons8-giù-squadrato-50.png" alt="" srcset="">
        <img class="iconcard" src="./assets/icons8-menu-2-24.png" alt="" srcset="">
      </div>
      <div style="background-color: #edf2f7;">
        <hr>
        <label style="font-size: x-small; color: gray; "><b>Totale Spese Assegnate:</b></label>
        <hr>
      </div>
      <label style="font-size: x-small; color: gray;">Totale Spese Pianificate:</label>
      <hr>
      <label style="font-size: x-small; color: gray;">Totale Spese Approvate:</label>
      <div style="background-color: #edf2f7;">
        <hr>
        <label style="font-size: x-small; color: gray;"><b>Totale Spese Inserite:</b></label>
        <hr>
      </div>
      <label style="font-size: x-small; color: gray;">Totale Spese Approvate:</label>
      <hr>
      <label style="font-size: x-small; color: gray;">Totale Spese Rimborsate:</label>
      <hr>
    </div>
  </div>
  <div class="card">
    <div class="container">
      <label class="label2">Periodo:<b style="color: red;"></b></label>
      <div class="icondiv">
        <img class="iconcard" src="./assets/icons8-giù-squadrato-50.png" alt="" srcset="">
        <img class="iconcard" src="./assets/icons8-menu-2-24.png" alt="" srcset="">
      </div>
      <div style="background-color: #edf2f7;">
        <hr>
        <label style="font-size: x-small; color: gray; "><b>Totale Spese Assegnate:</b></label>
        <hr>
      </div>
      <label style="font-size: x-small; color: gray;">Totale Spese Pianificate:</label>
      <hr>
      <label style="font-size: x-small; color: gray;">Totale Spese Approvate:</label>
      <div style="background-color: #edf2f7;">
        <hr>
        <label style="font-size: x-small; color: gray;"><b>Totale Spese Inserite:</b></label>
        <hr>
      </div>
      <label style="font-size: x-small; color: gray;">Totale Spese Approvate:</label>
      <hr>
      <label style="font-size: x-small; color: gray;">Totale Spese Rimborsate:</label>
      <hr>
    </div>
  </div>
  <div class="card">
    <div class="container">
      <label class="label2">Campagna:<b style="color: red;">Q2</b></label>
      <div class="icondiv">
        <img class="iconcard" src="./assets/icons8-giù-squadrato-50.png" alt="" srcset="">
        <img class="iconcard" src="./assets/icons8-menu-2-24.png" alt="" srcset="">
      </div>
      <div style="background-color: #edf2f7;">
        <hr>
        <label style="font-size: x-small; color: gray; "><b>Totale Spese Assegnate:</b></label>
        <hr>
      </div>
      <label style="font-size: x-small; color: gray;">Totale Spese Pianificate:</label>
      <hr>
      <label style="font-size: x-small; color: gray;">Totale Spese Approvate:</label>
      <div style="background-color: #edf2f7;">
        <hr>
        <label style="font-size: x-small; color: gray;"><b>Totale Spese Inserite:</b></label>
        <hr>
      </div>
      <label style="font-size: x-small; color: gray;">Totale Spese Approvate:</label>
      <hr>
      <label style="font-size: x-small; color: gray;">Totale Spese Rimborsate:</label>
      <hr>
    </div>
  </div>
  <label class="label4" style="font-size:smaller; color: gray;">Nota Rimborso: il rimborso è stato
            approvato/negato per motivo ecc.</label>
</div>
<!--  2 card group   -->
<br>
<div class="cardgroupdiv">
  <article class="chart">
    <header class="chart-header">
      <h2 style="font-size: smaller;">Budget Aprile</h2>
    </header>
    <div class="chart-legends">
      <div class="chart-legend" style="--color:#a5a5a5; font-size: smaller;"><span class="pill"></span> Budget pianificato
      </div>
      <div class="chart-legend" style="--color:#ea0029; font-size: smaller;"><span class="pill"></span> Budget assegnato
      </div>
    </div>
    <div class="chart-bars">
      <div class="chart-bar" tabindex="0" style="--color:#a5a5a5; --value:80;"></div>
      <div class="chart-bar" tabindex="0" style="--color:#ea0029; --value:100;"></div>
    </div>
  </article>

  <article class="chart">
    <header class="chart-header">
      <h2 style="font-size: smaller;">Budget Maggio</h2>
    </header>
    <div class="chart-legends">
      <div class="chart-legend" style="--color:#a5a5a5; font-size: smaller;"><span class="pill"></span> Budget pianificato
      </div>
      <div class="chart-legend" style="--color:#ea0029; font-size: smaller;"><span class="pill"></span> Budget assegnato
      </div>
    </div>
    <div class="chart-bars">
      <div class="chart-bar" tabindex="0" style="--color:#a5a5a5; --value:65;"></div>
      <div class="chart-bar" tabindex="0" style="--color:#ea0029; --value:145;"></div>
    </div>
  </article>
</div>
<br>
<br>

I shared an image of what I see with your changes: I shared also all the html and css — 4ri37ix L, Jul 27 '23 at 23:04
@4ri37ixL OK, I fixed it. It was because of the ```padding-top``` on the anchor tags. — Md. Rakibul Islam, Jul 27 '23 at 23:32

How center elements in a navbar? just html and css

1 Answers1