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

This article mainly introduces "what is the difference between css layout center and CSS content center". In daily operation, I believe many people have doubts about the difference between css layout center and CSS content center. Xiaobian consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the questions of "what is the difference between css layout center and CSS content center". Next, please follow the editor to study!

I. understanding the centrality of layout and content

1. CSS DIV layout is centered

The layout is centered on the frame box itself. To center the web page body horizontally in the browser, you need to set up margin:0 auto to achieve the layout center.

The layout is centered on the frame box itself.

The layout is centered mainly on the layout framework settings such as (DIV box) settings. General page layout in the outermost body frame setting layout centered style (margin:0 auto) implementation. If you do not set the layout center code, the main body of some browsers is centered, but some browsers display on the left, which causes compatibility problems, so you must set a margin:0 auto style to center a box horizontally in the browser.

Features: the implementation of the center is very special to use margin style implementation, which requires special attention.

2. CSS DIV content is in the middle.

And DIV layout center with the same words in the middle of the content, it is the content of the box (text, pictures, etc.) to achieve horizontal center. Use the CSS style word and value code as text-align:center. Whether it is the div tag, H2 tag, h3 tag, p tag and other html element tag settings can make it horizontal to the content of the box.

Extend the CSS code:

CSS content is centered: text-align:center

CSS content to the left: text-align:left

CSS content to the right: text-align:right

Second, the essential difference between the two

Center the CSS layout: Center the frame horizontally (for example, center the DIV horizontally in the browser on the DIV itself).

CSS content center: set the content in the box to center horizontally (for example, put pictures, text, etc.) in the DIV)

III. Application purpose

The CSS layout is centered so that the main body is centered at the browser level; the CSS content is centered so that the content in the frame box is centered. Take the DIV layout, the former centered horizontally on the DIV frame box itself, and the latter centered on the content contained in the DIV.

Fourth, center simple picture and text case

1. The layout is centered.

In order to observe the effect of layout centering, we set the css width 300pxposition CSS high 100pxscape CSS border to red for a DIV and set the layout centering code margin:0 auto

1), complete DIV CSS code

Simple layout instance DIVCSS5. {margin:0 auto; width:300px; height:100px; border:1px solid # F00} layout centered simple instance

2) Screenshot of layout centered effect

2. Content is in the middle

In order to observe the effect of centered, left and right content, we set three div boxes with the same width of 300px and a red frame of 100px, setting the center, right and left styles respectively.

1), complete HTML code (DIV CSS code)

Simple content centering and layout centring instance DIVCSS5. {margin:0 auto;width:300px;height:100px;border:1px solid # F00TText text copyright alignposition center;} layout centering and content centring simple instance

Add text-align:center to center the contents of the box.

2) Screenshot of content centered effect

At this point, the study on "what is the difference between css layout center and CSS content center" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.