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

This article mainly explains "the CSS attribute makes the overall layout center and the background of the web page center". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "CSS properties to make the overall layout of the center and let the background of the page center method"!

DIV+CSS layout centering problem

In the DIV+CSS layout page, from the layout content to the text center of the page is very important, and CSS to set the center is also very simple.

1. First of all, use the CSS attribute to center the overall layout:

If the parent of the page is set to center, what is the parent of the entire page? We can imagine that the content of the entire page is contained by and these two. According to the near parent, we set the CSS of body to achieve the centering problem. We can center text-aligh:center; in the content, but this element is useful under IE. After experiments, setting the text-aligh:center; center in browsers such as Firefox cannot center the layout, so we also need to set a "margin:0auto". "what does this mean? it means that the content is 0 distance from top to bottom, and the left and right is" auto "automatic, so that you can set the center code to center the specific CSS of the page layout as:

Body {text-aligh:center;margin:0auto } but even this will cause problems, because you have not set how wide the layout is "width". Once you set the float: attribute in the outermost CSS control of your content layout, the layout will lean towards the float: direction you set. The solution is that in addition to setting the CSS property of the body center, the outermost div should also be centered in the layout setting, and define the width, if the width of the page is 700px. The outermost CSS style is class= "weicheng", which should be set like ".weicheng {margin:0auto" Width:700px;} "is fine. The complete example is (you can copy the code to create a new html file browsing effect):

The following is the referenced content:

Www.divCSS5.com 's CSSdiv layout center example title > style > head > I am the center experiment in CSS; my layout outer layer has a 1px black edge, I am wide 700px, the height is 200px, and the distance from the top content is set to 5PXdiv > body > html >

DIV+CSS layout centered instance browsing

2. Use the CSS attribute to center the background of the web page:

The center here includes the left and right center and the up and down center, and the center code is as follows:

Body {BACKGROUND:#FFFurl (http://www.divCSS5.com/img/CSS-logo.gif) no-repeatcenter;} / / this paragraph means that the background of the CSS-logo.gif image is set not to repeat (no-repeat), and the center (center) is centered left and right, while the vertical does not need to be set, so it will be centered automatically.

3. CSS: how to center the contents of the text and pictures left and right:

We know that it is easy to use text-align:center; directly to center the text and picture content, but vertically, if we center vertically at the height of 120px, the picture is centered on the vertical-align:middle;CSS attribute, and the text should be centered by setting the line height to the Chinese text content. Here we set the height of 120px, which requires setting a line-height:120px. In this way, through the CSS attribute class style to achieve the text and pictures of the upper and lower left and right center.

The code for the center of the entire site is as follows:

The following is the referenced content:

Www.divCSS5.com CSSdiv complete center instance title > style > head > I am the complete center instance in CSS; my layout outer layer has an edge for 1px div > body > html > so far, I believe you have a deeper understanding of the "CSS attribute to center the overall layout and the method to center the background of the page", might as well come to the actual operation. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.