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
Solve the problem of docker pull being reset
This article introduces how to solve the problem ...
Implementing Binary Search Tree in JavaScript
The search binary tree implementation in JavaScri...
Install and build a server environment of PHP+Apache+MySQL on CentOS
Yum (full name Yellow dog Updater, Modified) is a...
Solution to PHP not being able to be parsed after nginx installation is complete
Table of contents Method 1 Method 2 After install...
In-depth exploration of whether Mysql fuzzy query is case-sensitive
Preface Recently, I have been busy writing a smal...
Summary of basic usage of $ symbol in Linux
Linux version: CentOS 7 [root@azfdbdfsdf230lqdg1b...
HTML table markup tutorial (48): CSS modified table
<br />Now let's take a look at how to cl...
2017 latest version of windows installation mysql tutorial
1. First, download the latest version of MySQL fr...
Javascript closure usage scenario principle detailed
Table of contents 1. Closure 2. Closure usage sce...
Vue uses calculated properties to complete the production of dynamic sliders
Layout part: <div id="slider"> &l...
How to export and import .sql files under Linux command
This article describes how to export and import ....
Several ways to solve CSS style conflicts (summary)
1. Refine the selector By using combinators, the ...
Implementation of TypeScript in React project
Table of contents 1. Introduction 2. Usage Statel...
Trash-Cli: Command-line Recycle Bin Tool on Linux
I believe everyone is familiar with the trashcan,...
How to limit access frequency, download rate and number of concurrent connections in Nginx
1. Overview of modules and instructions used to l...