Detailed explanation of the solution to the problem that the font in HTML cannot be vertically centered even with line-height

Detailed explanation of the solution to the problem that the font in HTML cannot be vertically centered even with line-height

by 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:

<!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:

Our attempt to vertically center the text has no effect. We changed the code to

<!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

Sample code for changing the color of a png image through a CSS3 filter

This method uses the drop-shadow filter in CSS3 t...

Pure CSS to implement iOS style open and close selection box function

1 Effect Demo address: https://www.albertyy.com/2...

Solution to the root password login problem in MySQL 5.7

After I found that the previous article solved th...

Detailed explanation of the installation commands and usage of Docker and FastDFS

Docker Features 1) Quick to get started It only t...

Introduction to JavaScript Number and Math Objects

Table of contents 1. Number in JavaScript 2. Math...

An article to understand operators in ECMAScript

Table of contents Unary Operators Boolean Operato...

Detailed explanation of Nginx http resource request limit (three methods)

Prerequisite: nginx needs to have the ngx_http_li...

Solve the problem that ifconfig and addr cannot see the IP address in Linux

1. Install the Linux system on the virtual machin...

HTML+CSS to create a top navigation bar menu

Navigation bar creation: Technical requirements: ...

How to solve the problem that Docker container has no vim command

Find the problem Today, when I tried to modify th...

Modify the boot time of grub in ubuntu

The online search to modify the grub startup time...

What are the new features of Apache Spark 2.4, which will be released in 2018?

This article is from the Apache Spark Meetup held...

Method of iframe adaptation in web responsive layout

Problem <br />In responsive layout, we shou...

Solve the problem of docker log mounting

The key is that the local server does not have wr...

Sharing ideas on processing tens of millions of data in a single MySQL table

Table of contents Project Background Improvement ...