Align the child element horizontally in the parent element align-items and align-items

Align the child element horizontally in the parent element align-items and align-items

In this case, we will find that if the child element is vertically centered in the parent element, you must set the margin and padding settings to vertically center the child element.

Now you can use align-items in CSS3 to implement

Align-items

Defines how child elements are aligned on the parent Element Cross axis. Most of them do not understand what the cross axis is. The following is an example.

Now it is displayed in this way. I need to center the child element vertically in the parent element.

 

1. Add display: flex to the parent element. (If you do not understand it, check it first. The role of this attribute will be described later)

2. Add align-items: center to the parent element (box;

 

 

The effect is as follows:

You will find that the child element has been vertically centered in the parent element, which is so easy.

You can view the upper left corner of the div as the cross axis, that is, the intersection of the X axis and the Y axis.

Of course, align-items also has other attributes.

The flex-start project is located at the beginning of the container. the flex-end project is located at the end of the container. The center project is located at the container. baseline alignment of the first line of text of the baseline project. If the sub-element is not set or set to auto, the flex-start project is located at the beginning of the container. The upper-left corner of the div can be viewed as the Cross-axis, that is, the intersection of the X axis and the Y axis. The cross point is the starting point.

 

Effect:

The alignment is in the upper left corner.

 

The flex-end project is at the end of the container.

Effect:

To put it bluntly, the bottom is aligned.

Baseline alignment of the first line of text in the baseline project

Effect

Stretch if the sub-element is not set or auto is set, the height of the entire container is occupied.

Effect

 

My child element P Flag has not set any height. If this attribute is set, it inherits the height of the parent element.

 

Compatibility: