Center the layout_center the background image_center the text content_html/css_WEB-ITnose in DIV CSS

From the layout content to the centering of article text on the page, it is very important, and it is very simple to set the centering with css.

1. First, introduce the use of css attributes to center the overall layout:
Set the parent content of the object to be centered. What is the parent of a page here? We can imagine that the content of the entire page is composed of and . Then according to the closer parent, we set the CSS of the body to achieve the centering problem. You can center the content with text-aligh:center; the specific css centering code is:
body{text-aligh:center; } But even this will cause problems because you have not set the width of the layout. ", once you set the float: attribute in the outermost css control in your content layout, the layout will lean in the float: direction you set. The solution is to set the centered css attribute of the body, and also need to The layout object is set to the center, and the width may be defined. If the width of the web page is 700px and the outermost css style is class="weicheng", the setting should be like this ".weicheng{margin:0 auto; width:700px;} " That's it. This element is useful under IE. After testing, under browsers such as Firefox, only setting text-aligh:center; in addition to the parent (body) cannot center the layout. Then we also need to set a " "margin:0 auto; "What does this mean? It means that the top and bottom of the content are 0 distance, and the left and right are "auto" automatically, so that you can set the web page layout to be centered (set margin:5px auto here; the same effect will not affect the experiment) . The complete example is (you can copy the code to create a new html file to view the effect):

The following is the quoted content:

以下为引用的内容：

我是css中的居中的实验;我的布局外层有一个边为1px黑色边，我宽700px，高为200px,设置了与顶部内容距离为5PX

org/1999/xhtml">

I am experimenting with centering in css; my outer layout has a 1px black edge. I have a width of 700px and a height of 200px, and set the distance from the top content to 5PX

Browse examples of CSS layout centering

2. Introduce the use of css attributes to center the background of the web page:
Centering here includes centering left and right and centering top and bottom. The centering code is as follows:
body{BACKGROUND : #FFF url(http://www.divcss5.com/img/css-logo.gif) no-repeat center;} //This passage means that the background of the css-logo.gif image should not be repeated (no -repeat), and center (center). This centering means centering left and right, while vertical does not need to be set, it will be centered automatically.

3. Tutorial on how to center the introduction text and picture content left, right, top and bottom in css:
We know that it is easy to center the left and right, and just use text-align:center; to center the text and picture content, but Vertically, if we vertically center the image at a height of 120px, the image centering is the vertical-align:middle; css attribute, and the text centering requires setting the line height method to center the text content. Here we set the height to 120px, which needs to be set Line-height: 120px; In this way, the text and image can be centered up, down, left, and right through CSS attribute styles.

The code centered on the entire website is as follows:

以下为引用的内容：

我是css中的居中的完整居中实例;我的布局外层有一个边为1px

The following is the quoted content: