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

This article mainly introduces CSS how to solve the problems related to the center of DIV, the article is very detailed, has a certain reference value, interested friends must read it!

Using CSS to solve the problem of DIV centering

First, use CSS to center the DIV layer horizontally

Add the following attributes to DIV layers that need to be centered horizontally:

Margin-left:auto

Margin-right:auto

This is already in the middle in FF, but still not in IE!

The problem is not CSS but the XHTML page itself. You need to add this code to make the above settings effective:

How to center DIV

The main style definitions are as follows:

Body {TEXT-ALIGN:center;} # center {MARGIN-RIGHT:auto;MARGIN-LEFT:auto;}

Description:

First of all, defining TEXT-ALIGN:center; in the parent element means that the content in the parent element is centered; for IE, this setting is fine. But it cannot be in the middle in mozilla. The solution is to add "MARGIN-RIGHT:auto;MARGIN-LEFT:auto;" when the child element is defined.

It is important to note that if you want to use this method to center the entire page, it is recommended not to be in a DIV, you can remove multiple div in turn, as long as you define MARGIN-RIGHT:auto;MARGIN-LEFT:auto; in each div.

How to center a picture vertically in DIV

Use the background method. For example:

Body {BACKGROUND:url (background image path) # FFFno-repeatcenter;}

The key is the center of * *, which defines the location of the image. You can also write "topleft" (upper left corner) or "bottomright", etc., or you can directly write the number "5030".

How to center text vertically in DIV

If it is text, you cannot use the background method. You can use the method of increasing line spacing to achieve vertical centering. The complete code is as follows:

Body {TEXT-ALIGN:center;} # center {MARGIN-RIGHT:auto; MARGIN-LEFT:auto; height:200px; background:#F00; width:400px; vertical-align:middle; line-height:200px;}

Testcontent

Description:

Vertical-align:middle; means that the line is centered vertically, so we increase the line spacing to the same height as the entire DIV, line-height:200px;, and then insert the text, which is centered vertically.

CSS+DIV controls the vertical centering of elements in the page, the global and regional vertical centering of the code

Body {text-align:center;} # a {width:200px; height:400px; background:#000;} # b {margin-top:_expression ((a.clientHeight-50) / 2); width:50px; height:50px; background:#FFF;} # c {position:absolute; left:_expression ((body.clientWidth-50) / 2); top:_expression ((body.clientHeight-50) / 2); width:50px; height:50px Background:#F00;}

Another way:

The above is all the contents of the article "how to solve the problems related to DIV centering by CSS". Thank you for reading! Hope to share the content to help you, more related 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.