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

This article mainly shows you "how to use the CSS floating attribute to achieve all kinds of DIV alignment", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to use the CSS floating attribute to achieve various DIV alignment" this article.

1. Div left alignment of div css layout-TOP

1. Div left alignment condition and method

Just add float:left to the div style that you want to align to the left (left of the game).

2. Complete code for DIV+CSS layout:

Div alignment instance online demo DIVCSS5.-left {float:left;width:250px;height:50px;border:1px solid # F00} this DIV is displayed with left alignment

3. Screenshot of an example:

Div left-to-left alignment instance screenshot

2. Css+div instance from right to right-TOP

1. Div right alignment condition and method

Just add float:right to the div style that you want to align to the right (local right).

2. Div css layout complete html code:

Div alignment instance online demo DIVCSS5.-right {float:left;width:250px;height:50px;border:1px solid # F00} this DIV is displayed with right alignment

3. Screenshot of right-aligned instance

Screenshot of div right-aligned instance realized by css

2. Div center aligns css div instances-TOP

1. Div center alignment conditions and methods.

You only need to add margin:0 auto to the div style that you want to center, not the float style.

Because there is no floating in the center of float, we need to remove the float style. In order to be compatible with major browsers to center the div, we need to add margin:0 auto to the corresponding style of div.

2. Css+div layout complete HTML source code:

Div alignment instance online demo DIVCSS5.-cent {margin:0 auto;width:250px;height:50px;border:1px solid # F00} this DIV is centered and right aligned to display

3. Screenshot of css layout example

These are all the contents of the article "how to use the CSS floating property to achieve various DIV alignments". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.