Kevin Powell - Community•3mo ago

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>

<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>

<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>

11 Replies

vince•3mo ago

Can you put this in a codepen please? 😄 https://codepen.io/

Thick Black WOP•3mo ago

sure, I just did now. https://codepen.io/Yoo-the-styleful/pen/raORQgG

Yoo

CodePen

Untitled

...

vince•3mo ago

Ah, you have display: inline on your .sidenav-item-container. Changing that to display: flex combined with what you already have (align-items: center) will center it vertically

vince•3mo ago

This is the devtools view (f12 on your keyboard)

Thick Black WOP•3mo ago

I am new to this, what if I don't want to make it a flex box, and just keep it as a regular div?

vince•3mo ago

Why wouldn't you want to use flex?

Thick Black WOP•3mo ago

So, since I am new, I like to try out different things. I don't really see a need for a flex here because I just want a div container I prefer a div over a flex when the design doesn't require the div to shrink/grow or wrap.

vince•3mo ago

I think your thought process is good: too many beginners throw flex on everything when it isn't needed. But what you want to do here is center items, and to do that it's easiest to use flex or grid. Div vs. flex: Div is an html element and flex is a css value. I'm assuming you mean display: inline or block? display: inline is inline-level elements, like spans. Divs are display: block by default, and you're changing it to inline. I could get into it but it would probably take me a long time to write this all out... basically what you're doing is making both the icon and the label inline, but they're different font families and font sizes. You can try to make these the same font size, line height, etc. and see if that will visually center it vertically... or you can just throw a display: flex; align-items: center and be done with it

Thick Black WOP•3mo ago

I ment inline-block, I made a mistake there.

vince•3mo ago

I removed all the styles on the material symbols class just to showcase that making them inline or inline-block works now; they're aligned vertically. But the font family of the material icon makes centering it tricky

Thick Black WOP•3mo ago

oh, I see.

Gaming

Programming

how to center this? n00b question

Did you find this page helpful?