How to place the alphabets in the sidebar? [duplicate]-CodePudding

This is how my sidebar looks right now. Colored to easily identify the elements. My code is

.sidebar {
  display: grid;
  background-color: royalblue;
  height: 100%;
  width: 160px;
  position: fixed;
  justify-content: center;
}

.sidebar ul {
  background-color: green;
  justify-content: center;
}

.sidebar a {
  text-decoration: none;
  color: black;
  background-color: red;
  display: block;
  text-align: center;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

<aside class="sidebar">
  <ul>
    <a href="#">a</a>
    <a href="#">b</a>
    <a href="#">c</a>
  </ul>
</aside>

How do I center the text in the green box both vertically and horizontally?
Why is there space on top of the green box?

CodePudding user response：

Lists have margin on them by default in most browsers. You have to remove that with margin: 0. Flex layout on the container with a few new rules centers things up.

Then, we need to fix your list structure. Lists must have list items, and since they have bullets by default, we need to remove those with list-style: none.

Finally, lists also have padding (to make room for the bullets). We need to remove that with padding: 0 so it can be centered. (I left a 5px padding for demonstration.)

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: royalblue;
  height: 100%;
  width: 160px;
  position: fixed;
}

.sidebar ul {
  background-color: pink;
  margin: 0;
  padding: 5px;
  list-style: none;
}

.sidebar a {
  text-decoration: none;
  color: black;
  background-color: red;
  display: block;
  font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-align: center;
}

<aside class="sidebar">
  <ul>
    <li><a href="#">a</a></li>
    <li><a href="#">b</a></li>
    <li><a href="#">c</a></li>
  </ul>
</aside>

You'll want to get familiar with your browser's document inspector. Several of the points above were fairly obvious when I did that.

And none of this is new on SO. Be sure to search each question thoroughly before you ask again. Both questions are duplicates.