How to use positioning to center elements (web page layout tips)
|
How to center an element in the browser window Here is the code block first. If any students have already figured it out, they can try it themselves first. position:fixed; /*Set the element you want to center*/ left:50%; /*or right:50%*/ top:50%; /*or bottom:50%*/ margin-left:-half the width of the element; /*or margin-right*/ margin-top:-half of the element height; /*or margin-bottom*/ Okay, let’s give it a try next!
<head>
<meta charset="UTF-8">
<style>
/*The box is centered in the browser window, not the entire page, so that when you slide the page up and down,
The box element is immovable, so a box_compare element is set here to serve as a reference, making its height exceed the window height, so that a scroll bar appears on the page*/
.box_compare {
width: 100%;
height: 1000px;
background: skyblue;
}
.box {
/*Set the width and height of the element*/
width: 500px;
height: 300px;
background: blue;
position: fixed;
left: 50%; /*The leftmost edge of the element is 50% of the distance from the left side of the window*/
top: 50%; /*The top edge of the element is 50% of the distance from the top of the window*/
margin-top: -150px;
margin-left: -250px;
}
</style>
</head>
<body>
<div class="box_compare"></div>
<div class="box"></div>
</body>The above method actually has a drawback, that is, it cannot be used when the width of the element is not set. After adding the positioning element, the width of the element without setting the width is stretched by the content, so this method cannot be used. Here is a simpler method for everyone. position: fixed; /*Set for the element you want to center*/ left: 0; right: 0; top: 0; bottom: 0; margin: auto; Some students may not understand this method, why left: 0; right: 0; and top: 0; bottom: 0;. The purpose is to turn it into a free element. At this time, the width and height of the element are the same as the parent element by default when they are not set. Then use margin: auto; to center it in the browser window. Otherwise, it is invalid to use margin: auto; on an element with fixed.
<head>
<meta charset="UTF-8">
<style>
/*box_compare has the same comparison function as above*/
.box_compare {
width: 100%;
height: 1000px;
background: skyblue;
}
.box {
width: 60%;
height: 300px;
background: blue;
position: fixed;
left: 0;right: 0;
top: 0;bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="box_compare"></div>
<div class="box"></div>
</body>The above method is widely used when writing web pages. Students should practice more! Now that you have learned how to center an element in the browser window, how do you center an element within its parent element? Students can think about it on their own, and I will introduce it to you in the next issue! This concludes this article on how to use positioning to center elements (web page layout tips). For more content on page positioning to center elements, please search 123WORDPRESS.COM’s previous articles or continue browsing the related articles below. I hope you will support 123WORDPRESS.COM in the future! |
<<: Simple usage example of MySQL 8.0 recursive query
>>: Vue implements accordion effect
Recommend
Examples of using the or statement in MySQL
1. The use of or syntax in MySQL, and the points ...
How to dynamically modify container port mapping in Docker
Preface: Docker port mapping is often done by map...
Implementation code of the floating layer fixed on the right side of the web page
Copy code The code is as follows: <!DOCTYPE ht...
How to convert MySQL horizontally to vertically and vertically to horizontally
Initialize Data DROP TABLE IF EXISTS `test_01`; C...
CSS3 Bezier Curve Example: Creating Link Hover Animation Effects
We will use CSS3 animated transitions to create a...
How to develop Java 8 Spring Boot applications in Docker
In this article, I will show you how to develop a...
【HTML element】How to embed images
The img element allows us to embed images in HTML...
Shell script settings to prevent brute force ssh
The shell script sets access control, and the IP ...
Nginx dynamic and static separation implementation case code analysis
Separation of static and dynamic Dynamic requests...
Tomcat uses thread pool to handle remote concurrent requests
By understanding how tomcat handles concurrent re...
Installation, configuration and uninstallation of MySQL 8.0 in Windows environment
Software Version Windows: Windows 10 MySQL: mysql...
mysql8 Common Table Expression CTE usage example analysis
This article uses an example to describe how to u...
Ubuntu 18.04 does not prompt for password when installing MySQL and how to solve it
The installation of MySQL 5.7 on Ubuntu 1804 is i...
Script example for starting and stopping spring boot projects in Linux
There are three ways to start a springboot projec...
Problems with nodejs + koa + typescript integration and automatic restart
Table of contents Version Notes Create a project ...