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

This article introduces the relevant knowledge of "how to achieve div floating center in CSS". 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!

1. Separate div layout is centered

The implementation of centering a single div object layout is to provide a margin:0 auto style for the div box to achieve centering.

1. Div css complete code

Single box in the center. {margin:0 auto; width:400px; height:80px; border:1px solid # 00F} single div box in the center

2. Screenshot of the effect of a single div instance of div+css

Screenshot of css instance effect

3, summary, here in order to observe the effect, we add a border, width, height to this case div, and use margin:0 auto to achieve the center.

4. Related css div tutorials

1), div css center condition

2), css in the middle

3) the level of div is in the middle

4), div center code

5), div css font center

6), html text center

The skill and method of centering div in the middle of two and three columns

In the three-column div box layout, the leftmost and rightmost div boxes can be laid out left and right by using float:left and float:right, while the middle div box is typeset in the middle of it, and float has no floating style, only through float:left and float:right to achieve the central layout.

Usually the leftmost and middle div setting float:left on the rightmost div setting float:right can be achieved juxtaposed three-column layout, but you need to note that three boxes set width + set css border + width + padding and other styles the total width must be less than or equal to the outer parent div width, otherwise there will be css dislocation compatibility problems.

Three side by side in the center, first of all, the outer layer should set a div box, and then lay out three boxes in this object to achieve css side by side.

1. The complete html+div+css code is as follows

The three-column layout is centered. {margin:0 auto; width:400px; height:120px; border:1px solid # 00F}.-l {float:left; width:120px;height:120px; border-right:1px solid # 00F}.-c {float:left; width:158px;height:120px; background:#CCC} / * where the width is 400-120-120-2 * /.-r {float:right; width:120px;height:120px; border-left:1px solid # 00F} left, middle and right

2. Screenshot of intermediate css layout in three-column layout

Middle div in three columns uses floating to achieve screenshot of centered layout effect

Here we pay attention to the calculation of the width of the three boxes, and we also specifically explained the skills of calculating the width of the box in our training. here the middle div box ".-c" example uses the float:left implementation to need the layout style, and uses the floating style to center the div box.

This is the end of the content of "how to achieve div floating center in CSS". Thank you for 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.