An example of vertical centering of sub-elements in div using Flex layout
|
1. Flex is the abbreviation of Flexible Box, which means "flexible layout" and is used to provide maximum flexibility for the box model. Any container can be specified as a Flex layout. Note that after setting the Flex layout, the float, clear and vertical-align properties of the child elements will become invalid. Elements that use Flex layout are called Flex containers, or "containers" for short. All its child elements automatically become container members, called Flex items, or "items" for short. By default, a container has two axes: the horizontal main axis and the vertical cross axis. The starting position of the main axis (the intersection with the border) is called the main start, and the ending position is called the main end; the starting position of the cross axis is called the cross start, and the ending position is called the cross end. Items are arranged along the main axis by default. The main axis space occupied by a single item is called the main size, and the cross axis space occupied is called the cross size. flex-direction flex-wrap flex-flo justify-content align-items align-content
2. Vertical centering of elements within a block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>About vertical centering of elements</title>
<style>
html, body {
border: 0;
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
.div-main {
display: flex;
align-items: center;
justify-content: center;
height: 30%;
width: 50%;
background: #00a2d4;
}
.sub-span {
margin: auto;
font-size: xx-large;
}
</style>
</head>
<body>
<div class="div-main">
<span class="sub-span">
The Goddess of Luo River
</div>
</body>
</html>
This is the end of this article about examples of vertically centering sub-elements inside a div using Flex layout. For more information about vertically centering sub-elements inside a div using Flex, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: Various methods to implement the prompt function of text box in html
>>: Analysis of the reasons why MySQL's index system uses B+ tree
Recommend
Vue3 + TypeScript Development Summary
Table of contents Vue3 + TypeScript Learning 1. E...
How to operate Docker and images
Find mirror We can search for images from the Doc...
Three Ways to Lock and Unlock User Accounts in Linux
If you already have some kind of password policy ...
How to create a view in MySQL
Basic syntax You can create a view using the CREA...
MySQL 5.7.24 installation and configuration graphic tutorial
This article shares the installation and configur...
How to implement communication between Docker containers
Scenario: A laradock development environment (php...
How to set the number of mysql connections (Too many connections)
During the use of mysql, it was found that the nu...
Use scripts to package and upload Docker images with one click
The author has been working on a micro-frontend p...
Simple use of Vue bus
Simple use of Vue bus Scenario description: Compo...
Detailed explanation of the solution to garbled characters when JDBC connects to MySQL to process Chinese
Detailed explanation of the solution to garbled c...
Let's talk about my understanding and application of React Context
Table of contents Preface First look at React Con...
A detailed introduction to Linux system configuration (service control)
Table of contents Preface 1. System Service Contr...
Summary of the style modification of the input box of type="file"
What is the input type="file"? I don'...
Solve the error of installing VMware Tools on Ubuntu 18.04
1. According to the online tutorial, the installa...
CSS realizes process navigation effect (three methods)
CSS realizes the process navigation effect. The s...