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
Detailed explanation of the use of the MySQL parameter sql_safe_updates in the production environment
Preface In case of application bug or DBA misoper...
HTML+CSS to achieve charging water drop fusion special effects code
Table of contents Preface: accomplish: Summarize:...
Summary of Binlog usage of MySQL database (must read)
I won't go into details about how important b...
Vue imitates Ctrip's carousel effect (sliding carousel, highly adaptive below)
Let's look at the case first. Use vue+swiper ...
Avoiding Problems Caused by Closures in JavaScript
About let to avoid problems caused by closure Use...
Implementation of draggable rows and columns and selection column components based on el-table encapsulation
Effect Need environment vue elementUI Drag and dr...
DD DT DL tag usage examples
We usually use the <ul><li> tags, but ...
jQuery implements a simple comment area
This article shares the specific code of jQuery t...
A method of making carousel images with CSS3
Slideshows are often seen on web pages. They have...
Common usage of regular expressions in Mysql
Common usage of Regexp in Mysql Fuzzy matching, c...
Sharing experience on the priority of CSS style loading
During the project development yesterday, I encoun...
Detailed explanation of CSS margin overlap and solution exploration
I recently reviewed some CSS-related knowledge po...
JS implements a simple counter
Use HTML CSS and JavaScript to implement a simple...
MySQL optimization: use join instead of subquery
Use JOIN instead of sub-queries MySQL supports SQ...
Detailed explanation of the use of DockerHub image repository
Previously, the images we used were all pulled fr...