Symbols and numbers behave differently when the vertical alignment center inside the input field

Question

Hey. I use some input fields in my project for the reset password function. I want my input values ​​to be vertically aligned inside the input fields.

• When I correctly aligned the numerical values ​​inside the input, the character values ​​are not aligned correctly. like this.

My CSS for input in this case

width: 50px;
height: 48px;
border: 1px solid #58595b;
border-radius: 100%;
font-size: 40px;
padding-bottom: 2px;
text-align: center;

2. When I correctly aligned the values ​​of characters inside the input, the numerical values ​​are not aligned correctly. like this.

My CSS for input in this case

width: 50px;
height: 43px;
border: 1px solid #58595b;
border-radius: 100%;
font-size: 40px;
padding-bottom: 7px;
text-align: center;

I'm trying to change height, and padding-bottomin these cases.

My question

How can vertically align both numerical and signed values ​​at the same time. For a while I was stuck in this situation. Please help. thanks in advance.

** I tested both in Safari and Chrome.

jsFiddle → https://jsfiddle.net/qzrf4dnb/2/

Answer 1

-less-number line-height :

jsFiddle 1

.circle-div {
  width: 50px;
  height: 50px;
  line-height: 50px;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  font-size: 30px;
  color: white;
  background-color: skyblue;
  float: left;
  margin: 5px;
}
.lower-case {
  line-height: 45px;
}

<div class="circle-div lower-case">c</div>
<div class="circle-div">9</div>
<div class="circle-div">A</div>

Hide result

---

1:

, , line-height, , , padding height, :

jsFiddle 2

.circle-input {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 2px #888 solid;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  font-size: 30px;
  float: left;
  margin: 5px;
}
.lower-case {
  height: 45px;
  padding-bottom: 5px;
}

<input type="text" class="circle-input lower-case" maxlength="1" value="c">
<input type="text" class="circle-input" maxlength="1" value="9">
<input type="text" class="circle-input" maxlength="1" value="A">

Hide result

---

2:

, javascript , :

jsFiddle 3

var circleInputs = $('.circle-input');

circleInputs.each(function() {
  checkLowerCase($(this), $(this).val());
});

circleInputs.on('change input', function() {
  checkLowerCase($(this), $(this).val());
});

function checkLowerCase(item, value) {
  if ((/[a-z]/).test(value)) {
    item.addClass('lower-case');
  } else {
    item.removeClass('lower-case');
  }
}

.circle-input {
  width: 50px;
  height: 50px;
  padding: 0;
  border: 2px #888 solid;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  font-size: 30px;
  float: left;
  margin: 5px;
}
.lower-case {
  height: 45px;
  padding-bottom: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="circle-input" maxlength="1" value="c">
<input type="text" class="circle-input" maxlength="1" value="9">
<input type="text" class="circle-input" maxlength="1" value="A">

Hide result

Answer 2

! , , . line-height = container-height , . , , ( , , g y). , , - ( css text-transform:uppercase;), , , .

div.round {
  height: 40px;
  width: 40px;
  font-size: 40px;
  line-height: 40px;
  text-align: center;
  border: 2px solid black;
  border-radius: 50%;
  font-family: arial;
  display: inline-block;
}

div.upper {
  text-transform: uppercase;
}

<div class='round'>a</div>
<div class='round'>9</div>
<div class='round'>c</div>
<div class='round'>7</div>
<br /> vs <br />
<div class='round upper'>a</div>
<div class='round upper'>9</div>
<div class='round upper'>c</div>
<div class='round upper'>7</div>

Hide result

, . , , .

Answer 3

margin: auto; height=width comment padding-bottom
,