How to achieve Vertical Center and horizontal Center of ul li content by HTML
In this article Xiaobian for you to introduce in detail "HTML how to achieve ul li content vertical center and horizontal center", detailed content, clear steps, details handled properly, I hope that this "HTML how to achieve ul li content vertical center and horizontal center" article can help you solve doubts, following the editor's ideas slowly in-depth, together to learn new knowledge bar.
1. Li content is vertically centered
The flex-direction attribute specifies the direction of the flexible project. When its property value is set to column, items that indicate flexibility are displayed vertically, just like a column. Justify-content is used to set or retrieve the alignment of the elastic box element in the direction of the principal axis (horizontal axis). When its property value is set to center, the item is in the center of the container. This enables vertical centering of li content in ul. The code is as follows:
HTML section:
Aa
Bb
Cc
Dd
CSS section:
.box {
Width:300px
Height:300px
Border:1pxsolidred
}
.boxul {
Height:300px
Display:flex
Flex-direction:column
Justify-content:center
}
.boxulli {
List-style:none
Margin:0auto
}
Effect picture:
Li centered 3.jpg
2. Li content level is in the middle.
The flex-direction attribute specifies the direction of the flexible project. When its property value is set to row (the default), flexible items are displayed horizontally, just like a line. Justify-content is used to set or retrieve the alignment of the elastic box element in the direction of the principal axis (horizontal axis). When its property value is set to center, the item is in the center of the container. In this way, the level of li content in ul can be centered. The code is as follows:
HTML section:
I am in a good mood today
I am in a good mood today
I am in a good mood today
I am in a good mood today
CSS section:
.box {
Width:100%
Height:200px
Border:1pxsolid#000
}
.boxul {
Height:200px
Display:flex
Flex-direction:row
Justify-content:center
}
.boxulli {
List-style:none
Height:200px
Line-height:200px
}
Read this, the "HTML how to achieve ul li content vertical center and horizontal center" article has been introduced, want to master the knowledge of this article also need to practice and use in order to understand, if you want to know more related articles, welcome to pay attention to the industry information channel.
