Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.