CSS sets horizontal and vertical center and css Center for row and block-level elements.

CSS sets horizontal and vertical center and css Center for row and block-level elements.

CSS settingsLine ElementHorizontally centered

1. Div {text-align: center}/* the row elements in the DIV are horizontally centered */

 

CSS settingsLine ElementVertical center

1. Div {height: 30px; line-height: 30px}/* the row elements in the DIV are vertically centered */

 

PS: of course, if both the horizontal center and the vertical center are required, take a closer look.

1. Div {text-align: center; height: 30px; line-height: 30px}

 

CSS settingsBlock-level elementsHorizontally centered

1. Div p {margin: 0 auto; width: 500px}/* block-level element p must be set width,
2. In order to horizontally center the DIV parent container */

 

CSS settingsBlock-level elementsVertical center

1. Div {width: 500px}/* DIV parent container setting width */
2. Div p {margin: 0 aut0; height: 30px; line-height: 30px}/* block-level element p can also be added with a width,
3. To achieve the horizontal center effect relative to the parent DIV container */

Note: In actual projects in the future, the vertical center layout of block-level elements may be more complicated than this one. Please pay attention to relevant articles in the future!

 

What is an in-Row Element?

Common html tags such as span, a, lable, strong, and B are all in-row elements.

By default, the width, height, and margin of the upper and lower margin cannot be set for any element in the row.

Of course, this is not absolute. Through CSS, any row element can be converted into a block-level element! For example:

1. Span {display: block}/* span is set to block-level element */

 

What is a block-level element?

Common html tags such as div, p, li, h1, h2, h3, and h4 are block-level elements.

Of course, this is not absolute. Through CSS, any block-level elements can be converted into intra-row elements! For example:

1. H1 {display: inline}/* h1 is set to the Row Element */

 

Summary:

It is very important for beginners to understand the concept of line elements and block-level elements, which is helpful for div and css layout! If you have any questions, please leave a message!

Respect for intellectual property rights. For the reprinted article, please indicate the source: yixiangtiankai> CSS sets the horizontal center and vertical center of row and block-level elements