Center the layout_center the background image_center the text content in DIV+CSS-CSS Tutorial-php.cn

Center the layout_center the background image_center the text content in DIV+CSS

高洛峰

Release： 2016-12-12 14:39:18

Original

1861 people have browsed it

1. First, let’s 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-align: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 "width". 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 that in addition to setting the centered css attribute of the body, you also need to set the layout object Set it to the center and define the width. If the width of the web page is 700px and the outermost css style is class="weicheng", then the setting should be like ".weicheng{margin:0 auto; width:700px;}" 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:" for the object. 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 the web page layout can be set to be centered (here set margin: 5px auto; 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):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
<title>www.divcss5.com的CSS div的布局居中实例</title>  
<style type="text/css">  
<!--  
body{ text-align:center; }  
.waicheng {color: #0066CC; margin:5px auto; width:700px;
 height:200px; border:1px solid #000000;}  
-->  
</style>  
</head>  
<body>  
<div class="waicheng">我是css中的居中的实验;我的布局外层有一个边为1px黑色边，
我宽700px，高为200px,设置了与顶部内容距离为5PX</div>  
</body>  
</html>

Copy after login

CSS layout centering example browsing

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

3. Tutorial on how to center left, right, top and bottom introductory text and image content with css:
We know that it is easy to center the left and right. We can directly use text-align:center; to center the text and image content, but vertically, if we are The height is 120px. The image is centered vertically with the vertical-align:middle; css attribute. The text is centered by setting the line height method to center the text content. Here we set the height to 120px, which requires setting line-height:120px. ;In this way, the text and image can be centered up, down, left, and right through CSS attribute styles.

The code to center the entire website is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>www.divcss5.com的CSS div的完整居中实例</title> 
<style type="text/css"> 
<!-- 
body{ text-align:center; margin:0 auto;
 background:url(http://www.divcss5.com/img/css-logo.gif) no-repeat center;} 
.waicheng {color: #0066CC; margin:5px auto;
 width:700px; height:120px; line-height:120px; border:1px solid #000000; } 
.waicheng img {vertical-align:middle;} 
--> 
</style> 
</head> 
<body> 
<div class="waicheng">我是css中的居中的完整居中实例;
我的布局外层有一个边为1px
 <img src="http://www.divcss5.com/img/css-logo.gif" alt="图片内容居中" /></div> 
</body> 
</html>

Copy after login