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

Home

Web Front-end

CSS Tutorial

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

高洛峰

Dec 12, 2016 pm 02:39 PM

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>

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="/static/imghwm/default1.png"  data-src="http://www.divcss5.com/img/css-logo.gif"  class="lazy"   alt="图片内容居中" /></div> 
</body> 
</html>

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Demystifying Screen Readers: Accessible Forms & Best PracticesMar 08, 2025 am 09:45 AM

This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In

Create a JavaScript Contact Form With the Smart Forms FrameworkMar 07, 2025 am 11:33 AM

This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.

Adding Box Shadows to WordPress Blocks and ElementsMar 09, 2025 pm 12:53 PM

The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.

Working With GraphQL CachingMar 19, 2025 am 09:36 AM

If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or

Making Your First Custom Svelte TransitionMar 15, 2025 am 11:08 AM

The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.

Classy and Cool Custom CSS Scrollbars: A ShowcaseMar 10, 2025 am 11:37 AM

In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand

Show, Don't TellMar 16, 2025 am 11:49 AM

How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about