How to place the alphabets in the sidebar?

Question

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?

You first question is a duplicate, see : https://stackoverflow.com/a/19461564/16688813 — Tom, Oct 08 '21 at 12:43
@LeeTaylor I had pasted the rendered HTML but it was removed in the edit I believe. — Sid, Oct 08 '21 at 13:29
Sid, you didn't show rendered HTML. You showed templating markup and an image, so we couldn't see the problem live. You can see the edit history with the link. — isherwood, Oct 08 '21 at 13:34
@isherwood I am sorry if I am getting this wrong I thought by rendered html he meant the page that was rendered ie the image. — Sid, Oct 08 '21 at 13:37
Rendered HTML is what the browsers sees and what CSS acts on. It's what's generated by your application or templating engine. Capture it using the browser's document inspector, then simplify for a representative demo here. — isherwood, Oct 08 '21 at 13:38
Got it. If someone would have asked me what my flutter/dart code was rendering I would have thought they want a screenshot. — Sid, Oct 08 '21 at 13:41
They may have. That's the distinction between _what's rendered_ and _rendered HTML_. — isherwood, Oct 08 '21 at 13:50

isherwood · Accepted Answer · 2021-10-08T13:32:11.173

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.

How to place the alphabets in the sidebar?

1 Answers1