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
Steps to install cuda10.1 on Ubuntu 20.04 (graphic tutorial)
Pre-installation preparation The main purpose of ...
Native JS to implement real-time clock
Share a real-time clock effect implemented with n...
10 Things Excellent Web Developers Must Know to Improve Their Development Skills
"Development is more than just writing code&q...
Detailed explanation of the use of default in MySQL
NULL and NOT NULL modifiers, DEFAULT modifier, AU...
Example of deploying Laravel application with Docker
The PHP base image used in this article is: php:7...
How to solve the mysql error 1033 Incorrect information in file: 'xxx.frm'
Problem Description 1. Database of the collection...
Understanding and application analysis of mysql pessimistic locking and optimistic locking
This article uses examples to describe MySQL pess...
Summary of common functions and usage methods of WeChat applet development
Here, I have mainly sorted out some commonly used...
MySQL 5.7.13 installation and configuration method graphic tutorial (win10 64 bit)
This article shares with you the graphic tutorial...
Research on Web Page Size
<br />According to statistics, the average s...
4 flexible Scss compilation output styles
Many people have been told how to compile from th...
MySQL trigger syntax and application examples
This article uses examples to illustrate the synt...
Two query methods when the MySQL query field type is json
The table structure is as follows: id varchar(32)...
Use Nginx to build a streaming media server to realize live broadcast function
Written in front In recent years, the live stream...
A brief discussion on the problem that the text in the button is not centered vertically in the browser's compatibility mode
XML/HTML CodeCopy content to clipboard < butto...