[CSS] text center/text line spacing/text spread

Problem Description

1. In the case of Figure 1, how to display the text in the center of the box?

figure 1 figure 2

2. In the case of Figure 1, how to stretch the text up and down?

3. In the case of Figure 1, how to spread the text?

Code

1. The text is displayed in the center of the box

Leveraging the flexbox model, the standard "vertically centered" notation; will be used frequently in front-end careers

2. Text up and down spacing

Use line-height to open the height of the box, it is not suitable to write height at this time ( height: 100px has been commented out in the visible code.
This statement also has a place in responsive layout, please understand it carefully

3. The text is spread out

The text-align: center statement is similar to the above align-items , the difference is that this statement only applies to text content and cannot be centered on the box.
The text is spread out using text-align: justify

summary:

The content is not difficult, it is better to understand and accumulate, and rote memorization will not work.

For Xiaobai , it is recommended to write demos to understand and feel;
for veterans , they can quickly respond and write code when facing actual project needs. At this time, they can see the usual accumulation and foundation. It is recommended to contact the actual project of the past to deepen the memory and understanding



. I have seen it here~ Guest officer, give it a like!