Take the effect shown in the picture as an example. Obviously, we need to center the "Next" text not only horizontally but also vertically. At this time, we write the code as follows:
Our attempt to vertically center the text has no effect. We changed the code to
Detailed explanation of the solution to the problem that the font in HTML cannot be vertically centered even with line-height
|
by
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#next-button{
height: 54px;
text-align: center;
color: #fff;
background: #e2231a;
line-height: 54px;
font:16px "Microsoft YaHei","Hiragino Sans GB";
cursor: pointer;
margin: 0 auto;
width:400px;
}
</style>
</head>
<body>
<div id="next-button">Next</div>
</body>
</html>In it, we set the width, height, background color, font, and horizontal and vertical centering, however, we get this effect:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#next-button{
width:400px;
height: 54px;
text-align: center;
color: #fff;
background: #e2231a;
font:16px/54px "Microsoft YaHei","Hiragino Sans GB";
cursor: pointer;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="next-button">Next</div>
</body>
</html>, it can be centered vertically. The reason is that if line-height and font are included in the style declaration list, line-height is invalid and must be used together with font. As long as there is no font in the style declaration, you can use line-height to set the vertical center of the text. This concludes this article on the solution to the problem that fonts in HTML cannot be vertically centered even after using line-height. For more information about line-height not being able to be vertically centered, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future! |
<<: CSS new feature contain controls page redrawing and rearrangement issues
>>: Brief introduction and usage of Table and div
Recommend
Implementation of importing and exporting vue-element-admin projects
vue-element-admin import component encapsulation ...
JavaScript to implement the back to top button
This article shares the specific code for JavaScr...
vue+springboot realizes login verification code
This article example shares the specific code of ...
A brief introduction to VUE uni-app basic components
1. scroll-view When using vertical scrolling, you...
How to use Linux whatis command
01. Command Overview The whatis command searches ...
How to Check Memory Usage in Linux
When troubleshooting system problems, application...
Some tips on deep optimization to improve website access speed
Some tips for deep optimization to improve websit...
mysql-8.0.15-winx64 uses the zip package to install and the service is shut down immediately after starting
The MySQL version used in this example is mysql-8...
Analysis of the Principles of MySQL Slow Query Related Parameters
MySQL slow query, whose full name is slow query l...
How to install MySQL 5.7 from source code in CentOS 7 environment
This article describes how to install MySQL 5.7 f...
Detailed explanation of the process of building and running Docker containers
Simply pull the image, create a container and run...
Detailed explanation of sshd service and service management commands under Linux
sshd SSH is the abbreviation of Secure Shell, whi...
HTML input box optimization to improve user experience and ease of use
In order to improve user experience and ease of us...
Linux bash: ./xxx: Unable to execute binary file error
Today I sent a small tool for Ubuntu to a custome...
Implementation example of specifying container ip when creating a container in docker
When Docker creates a container, it uses the brid...