Solve the problem that line-height=height element height but text is not vertically centered

Let me first explain why the text is not vertically centered when line-height is equal to the element height. In fact, when line-height is equal to the element height, the text is not really centered, but looks centered. When the difference between the element height and font-size is large, this is more and more obvious. Here you can refer to What is a baseline?

The green line in the image below is the baseline: line-height refers to the distance between two lines of text [baseline]

Solution 1:

Combining line height, alignment and pseudo elements

.text{
  width: 16px; 
  height: 16px;
  font-size: 10px;
  text-align: center;
}
.text::after{
  content: ' ';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
  margin-top: 1px;
}

Solution 2:

Use the CSS3 scale property to set all values ​​to double the size and then double the size.

.text{
  width: 32px; 
  height: 32px;
  line-height: 32px;
  font-size: 20px;
  text-align: center;
  transform: scale(0.5);
}

This is the end of this article about solving the problem of line-height=height element height but text is not vertically centered. For more relevant content about line-height=height element height, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!