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
Explanation of the usage of replace and replace into in MySQL
MySQL replace and replace into are both frequentl...
Instructions for recovering data after accidental deletion of MySQL database
In daily operation and maintenance work, backup o...
mysql 8.0.18 mgr installation and its switching function
1. System installation package yum -y install mak...
js realizes the magnifying glass effect of shopping website products
This article shares the specific code of js to ac...
Vue3.0 uses the vue-grid-layout plug-in to implement drag layout
Table of contents 1. Plugins 2. Interlude 3. Impl...
A brief analysis of CSS :is() and :where() coming to browsers soon
Preview versions of Safari (Technology Preview 10...
CSS simulates float to achieve the effect of center text surrounding the image on the left and right
What is text wrapping around images? This is the ...
React method of displaying data in pages
Table of contents Parent component listBox List c...
Three common style selectors in html css
1: Tag selector The tag selector is used for all ...
Summary of methods for writing judgment statements in MySQL
How to write judgment statements in mysql: Method...
Problems with installing mysql and mysql.sock under linux
Recently, I encountered many problems when instal...
Detailed explanation of Web front-end performance optimization: resource merging and compression
Resource merging and compression for two purposes...
Setting up VMware vSphere in VMware Workstation (Graphic Tutorial)
VMware vSphere is the industry's leading and ...
How to implement Mysql scheduled task backup data under Linux
Preface Backup is the basis of disaster recovery....
JS implements user registration interface function
This article example shares the specific code of ...