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

This article introduces the knowledge about "how to center background pictures and text content in DIV+CSS". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

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 contained by and these two, then according to the closer parent we set the CSS of the body to achieve the centering problem, you can have text-align:center in the center of the content; the specific CSS centering code is:

body{text-aligh:center;} But even this will cause problems, because you do not set how wide the layout "width ", once you content layout in the outermost css control, set the float: attribute, the layout will be set to your float: direction, the solution, in addition to setting the body of the center css attribute, but also need to set the layout object center, and define the width, if the page width is 700px, the outermost css style is class="weicheng", then the setting should be like this ".weicheng{margin:0 auto; width:700px;} " And this element is useful in IE, after trial in Firefox and other browsers only this parent (body) set text-aligh:center; Centering is unable to center the layout, then we also need to set a "margin:0 auto ; " for the object, which means that the content is 0 distance up and down, and the left and right are "auto " automatically, so that you can set the layout of the web page to be centered (here set margin:5px auto; the same effect does not affect the experiment). The complete example is (you can copy the code and create a new html file to browse and watch the effect):

www.. Centered examples of CSS div layout for com

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.