How to set the horizontal center of block elements in HTML

This article mainly introduces how to set the horizontal center of block elements in HTML related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that after reading this HTML article on how to set the horizontal center of block elements will have a harvest, let's take a look.

1. Centering is achieved by defining the width of the block element and setting margin: 20px auto; (the text in the block element is not centered. If we want to center, we can add text-align: center; to the div style setting to achieve the horizontal center of the block element. In the code, we use inline writing css style) the result of the code is as follows:

How to set the horizontal centering step method in HTML div {border: 1px solid red; width: 350px; margin: 20px auto } the block element that defines the width is centered horizontally

2. Instead of defining the width to center the block element horizontally, we added the table tag to the div tag and used the table element to set the center of our block element in the css style. The code result is as follows:

How to set the horizontal centering step method in HTML table {border: solid 1px; margin: 0 auto } The first paragraph, the second paragraph, the third paragraph.

3. For block elements with variable width, change the display of block-level elements to inline type, and then use text-align:center to achieve centering. The code result is as follows:

How to set horizontal centering step method in HTML # center {text-align: center;} # center ul {list-style: none; margin: 0 Padding: 0; display: inline;} # center li {margin-right: 8px; display: inline } W3cschool W3cschool This is the end of the article on "how to set the horizontal center of block elements in HTML" Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to set the level of block elements in HTML". If you want to learn more, you are welcome to follow the industry information channel.