How Do I Align Text Vertically in a Round Button?-CodePudding

I’m trying to create resizing buttons using CSS. Here’s what I have so far (onclick handlers will come later):

body {
  background-color: Aqua;
}

.button {
  height: 25px;
  width: 25px;
  background-color: white;
  border-radius: 50%;
  border: 2px solid black;
  display: block;
  font-size: 200%;
}

.button div {
  vertical-align: middle;
  font-weight: 800;
}

.button:not(:last-child) {
  margin-bottom: .4cm;
}

<div style="text-align:center">
  <h1>Resizer Buttons</h1>
  <span ><div> </div></span>
  <span ><div>×</div></span>
  <span ><div>–</div></span>
</div>

It’s almost correct, except the text in the last button (just a hyphen), isn’t centered vertically. The first two buttons are vertically centered as intended, but not the last button.

Can anyone see what I’m doing wrong? I’m guessing it might something inherent in the way the dash character is designed in this font. It that’s the case, can anyone suggest a better Unicode dash character that would properly align vertically?

CodePudding user response：

Try <span ><div>−</div></span> for the last button. Also, when I tried your code in my computer the text in the buttons didn't center vertically and I changed the display property of button class to flex. You might want to consider doing that as well.

CodePudding user response：

A note first: In the snippet you posted, also the first two button's contents are not properly center-aligned vertically.

BUT: If you add display: flex; flex-direction: column; justify-content: center; to the CSS rule for .button, the alignment works as intended.

This changes the display property from block to flex, in this case "vertical flex" (i.e. flex-direction: column) and (vertically) centers the contents using justify-contents: center

body {
  background-color: Aqua;
}

.button {
  height: 25px;
  width: 25px;
  background-color: white;
  border-radius: 50%;
  border: 2px solid black;
  font-size: 200%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.button div {
  font-weight: 800;
}

.button:not(:last-child) {
  margin-bottom: .4cm;
}

<div style="text-align:center">
  <h1>Resizer Buttons</h1>
  <span ><div> </div></span>
  <span ><div>×</div></span>
  <span ><div>–</div></span>
</div>

CodePudding user response：

You could use display:flex for the button instead of block. Then you can use align-items:center and justify-contentcenter` like this:

    .button {
      height: 25px;
      width: 25px;
      background-color: white;
      border-radius: 50%;
      border: 2px solid black;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 200%;
    }

You will need to work with the minus symbol for your last button because it doesn't play well with the alignment. Sunay's suggestion sounds like a good alternative.