CSS: Text in a button is not centered

Issue

My text in the button is not centered. I feel that this happens all the time. The text always seems to be a bit under the center. I tried to open the code with Chrome and Edge. They look the same. Here's a photo of the button

.button-container {
  display: flex;
  position: absolute;
  top: 10px;
  right: 10px;
  text-align: center;
  vertical-align: middle;
}

.button {
  color: white;
  font-family: arial;
  font-size: 28px;
  background-color: black;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 5px;
  padding-bottom: 5px;
  border-style: none;
  border-radius: 50%;
}

<div class="button-container">
  <button class="button">x</button>
</div>

Solution

You are trying to position an element using hard coded padding values. My advice would be not to do that.

Remove the padding and change your x -> X. Then add these to your class

.button {height: 15px; aspect-ratio: 1/1;}

Whatever you set the height to the width will follow. With your border radius you can turn that clean box into a clean circle.

Edit: Recommendations aside, your main issue was caused by the use of a lowercase x which comes with a blank space 'baked in' above the letter. On the other hand, an uppercase X uses the whole line height and fills the container nicely.

Answered By - fluffybacon