Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to realize the centralization of box and content in HTML". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First, box model exercises

We have a need:

Create two boxes, the big box nesting a small box, the big box is red, the small box is blue, and the small box is centered in the big box.

Title .big {width:500px; height: 500px; background-color: red; box-sizing: border-box; border:1px solid;} .small {width:300px; height:300px; background-color: blue; / * margin-left:100px * / * margin-top:100px;*/ margin:100px auto / * this is equivalent to the above two statements, this method is to center our small box / * Note: if the two boxes are nested, set the inner box and the outer margin, the outer box will also top down the solution: add a border attribute to the outer big box, so in enterprise development In general, if you need to control the nested relationship box, you should first consider padding, and then consider margin, because margin is essentially used to control the gap between brothers.

Note:

(1)

Note: if the two boxes are nested, set the outer margin of the inner box, the outer one

The box will also be topped down, that is, only attributes:

Margin-left:100px

Margin-top:100px

Solution: add a border attribute to the outside big box, so in enterprise development, if you need to control the distance of the nested relationship box, you should consider padding first, and then consider margin, because margin is essentially used to control the gap between brothers.

(2) We see a new attribute value.

Margin:100px auto

This front is the distance, and the back auto will center the small box, if it is written as: margin:0 auto. Then it will only be centered horizontally, so we need to calculate the distance pixels and write them into the attribute value.

II. The difference between text-align:center and margin:0 auto

1. Text: text / picture stored in the box is centered horizontally.

2.margin:0 auto; function: to center the box horizontally.

D116_box_center_and_content_center .father {width:800px; height:500px; background-color:red; text-align: center; margin: 0 auto;} .son {width:100px; height:100px; background-color: blue; margin: 0 auto } I am a word

?

This is the end of the content of "how to center the box and content in HTML". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.