1, first introduce the use of CSS properties to the overall layout of the center:
Sets the parent content of the object to be centered, what is the parent of a page here? We can imagine the entire page content is composed of Body{text-aligh:center;} But even this will cause problems, because you don't have to set how wide the layout is "width", once your content layout is in the outermost CSS control, set the float: property, that layout will set you to float: direction, Workaround, in addition to the center of the body to set the CSS properties, but also to set the Layout object Center, and or define the width of how much, if the page width is 700px, the outermost CSS style is class= "Weicheng", that setting should be ". weicheng{ margin:0 Auto; width:700px;} "Can and this element in IE useful, after testing in Firefox and other browsers except this parent (body) Set Text-aligh:center; Center is unable to center the layout, we also need to set a" margin:0 auto; What does this mean, meaning that the content is up and down for 0 distance, and the left and right for "auto" automatically, so that you can set the implementation of the page Layout Center (here set margin:5px auto; The same effect does not affect the experiment). The full instance is (a copy of the code can be viewed by creating a new HTML file):
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
CSS Layout Center Instance Browse
2. Use CSS properties to center the background of a Web page:
The center is centered on the center and up and down center, the center code is as follows:
Body{background: #FFF url (http://www.divcss5.com/img/css-logo.gif) no-repeat Center;}// This paragraph means let css-logo.gif this picture set background is not repeated (no-repeat), and Center (center) This center is left and right center, and vertical does not need to set, automatically will center.
3, CSS Let the introduction of text, picture content about the center of the method tutorial:
We know about the middle of the good, directly with Text-align:center, you can let the text and picture Content Center, but vertical, if we are at height of 120px height under the vertical center, The center of the picture is the Vertical-align:middle;css attribute, the text center depends on the setting line High method Center text content, here we set to 120px height this need to set up a line-height:120px; In this way, the CSS attribute class style to achieve the text and the image of the upper and lower left and right center.
The code for the entire site center is as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">