Solution to the problem of invalid line-height setting in CSS

Solution to the problem of invalid line-height setting in CSS

About the invalid line-height setting in CSS

Let's write this string of code first:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.head{
			height: 100px;
			text-align: center;
			line-height: 100px;/* Set the line height to center the font*/
			background: #333;/* Set the entire background to black to make it easier to see the font*/
			color: red;
			font:700 18px simsun;/* Set the font*/
		}
	</style>
</head>
<body>
	<div class="head">
		Hello, Southwest Petroleum University.
	</div>
</body>
</html>

Then open it in the browser to see the effect:

We found that in the vertical direction, the font is not displayed in the middle of the box.

Then we put the statement that sets the line height below the statement that sets the font:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.head{
			height: 100px;
			text-align: center;
			background: #333;/* Set the entire background to black to make it easier to see the font*/
			color: red;
			font:700 18px simsun;/* Set the font*/
			line-height: 100px;/* Set line height*/
		}
	</style>
</head>
<body>
	<div class="head">
		Hello, Southwest Petroleum University.
	</div>
</body>
</html>

Then open it with your browser:

The font successfully jumped to the middle~~~~~

Summary: When setting the line height with CSS, the line-height attribute must be below the font, otherwise it will be invalid!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  JavaScript to achieve magnifying glass effect

>>:  Docker installation and deployment example on Linux

Recommend

Mobile front-end adaptation solution (summary)

I searched online and found that many interviews ...

Use CSS3 to implement button hover flash dynamic special effects code

We have introduced how to create a waterfall layo...

Vue implements a small weather forecast application

This is a website I imitated when I was self-stud...

Vuex combines session storage data to solve the problem of data loss when refreshing the page

Table of contents Preface 1. Reasons: 2. Solution...

Detailed steps to install xml extension in php under linux

Installing XML extension in PHP Linux 1. Enter th...

A brief discussion on the pitfalls and solutions of the new features of MySQL 8.0 (summary)

1. Create users and authorize Creating users and ...

How to add conditional expressions to aggregate functions in MySql

MySQL filtering timing of where conditions and ha...

Detailed explanation of fs module and Path module methods in Node.js

Overview: The filesystem module is a simple wrapp...

JavaScript to implement simple carousel chart most complete code analysis (ES5)

This article shares the specific code for JavaScr...

MySql learning day03: connection and query details between data tables

Primary Key: Keyword: primary key Features: canno...

mysql8.0.20 download and installation and problems encountered (illustration and text)

1. Search mysql in the browser to download and in...

Detailed explanation of VUE's data proxy and events

Table of contents Review of Object.defineProperty...

Write a dynamic clock on a web page in HTML

Use HTML to write a dynamic web clock. The code i...

Example of using JSX to create a Markup component style development (front-end componentization)

Table of contents JSX environment construction In...

Share 20 JavaScript one-line codes

Table of contents 1. Get the value of browser coo...