Css enables vertical center of text in the row and vertical center of css text

Css enables vertical center of text in the row and vertical center of css text

 

Previously, I used float, relative positioning, absolute positioning, display: table, and other css methods for positioning. I learned from the Internet that flex can achieve elastic layout, which is in line with future development trends.

1: vertically center the text in the box line. The solution is to set the Row Height of the text to the height of the box.

p {           border:#333333 solid 1px;           height:50px;           line-height:50px;           margin-bottom:30px;        }

 

 

2:The solution is to set the height of the box and set the same value for the padding-top and padding-bottom of the box.

 p {           border:#333333 solid 1px;           padding-top:30px;           padding-bottom:30px;           margin-bottom:30px;        }

3: vertically center the text in the box line. The solution is to convert the display attribute of the box into a table, and then add the span label to the text. The span attribute is displayed: table-cell.

p {           border:#333333 solid 1px;           height:60px;           display:table;           width:100%;           margin-bottom:30px;        }        p span {            display:table-cell;            vertical-align:middle;        }

<P> <span> People's Republic of China </span> </p>

4: To vertically center the text in the box line, the solution is to convert the attribute of the box display to flex.

        p {           border:#333333 solid 1px;           height:60px;           display:flex;           align-items:center;           margin-bottom:30px;        }

<P> <span> People's Republic of China </span> </p>

If the "People's Republic of China" level is also centered, the css should be adjusted:

P {border: #333333 solid 1px; height: 60px; display: flex; align-items: center;/* vertical direction */justify-content: center; /* horizontal direction */margin-bottom: 30px ;}