Search code examples
cssbuttonalignmentvertical-alignment

Align button value vertically in the middle

I have a button with a value set to "*".

<button class="testButton" value="*">*</button>

I need to align its value vertically in the middle.

I have tried the following, but not working:

.testButton {
  display: inline-flex;
  align-items: center; 
}

The padding is working, but I think it's not the best practice.

I have already reviewed other questions, with no clue.

Solution

  • It is centered. The problem come from the character asterisk. Use something else than "*". For example you will have the same problem with "∗". 

    button {
  font: monospace;
  height: 100px;
}
    <button type="button">*</button>
<button type="button">∗</button>
<button type="button">★</button>