Kevin Powell - CommunityKP-C
Kevin Powell - Community•5mo ago•
13 replies
Thick Black W

how to center this? n00b question

Hi, I am a newbie to this, honestly,
and i've come across this issue in css, seen in the image, where the icon isn't properly aligned with the text. How can I bring the icon font down to the center and raise the text font up?
<div>
    <div class="sidenav">
      <div class="sidenav-item-container">
        <i class="material-symbols-outlined sidenav-icon">
          home
        </i>
        <div class="sidenav-text">
          Home
        </div>
      </div>
      <div class="sidenav-item-container">
        <i class="material-symbols-outlined sidenav-icon">
          favorite
        </i>
        <label class="sidenav-text">
          Favorite
        </label>
      </div>
      <div class="sidenav-item-container">
        <i class="material-symbols-outlined sidenav-icon">
          star
        </i>
        <label class="sidenav-text">
          Star
        </label>
      </div>
      <div class="sidenav-item-container">
        <i class="material-symbols-outlined sidenav-icon">
          bolt
        </i>
        <label class="sidenav-text">
          Bolt
        </label>
      </div>
      <div class="sidenav-item-container">
        <i class="material-symbols-outlined sidenav-icon">
          abc
        </i>
        <label class="sidenav-text">
          abc
        </label>
      </div>
    </div>
  </div>

<style scoped>
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&symbols=menu,home,favorite,star,bolt,abc");

.sidenav {
  display: flex;
  flex-direction: column;
  align-items: left;
  justify-content: center;
  width: 12.5%;
  max-width: 300px;
  height: 100%;
  gap: 1rem;
  margin-top: 1.5rem;
}

.sidenav .sidenav-item-container {
  display: inline;
  align-items: center;
  justify-items: center;
  padding-left: .3rem;

  .sidenav-text {
    display: inline;
    margin-left: 10px;
  }
}
</style>
image.png
Was this page helpful?