First, let the page all div tags within the text center-
Implement all div inner font centered instance full page source code:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>div Font Centered Instance </title>
<style>
Div{text-align:center}
</style>
<body>
<div> I will be centered </div>
</body>
Second, the implementation of the specified Div content center-
To center the text font within a Div object in a Web page, we need a CSS name to create a new CSS selector for class or ID, where you need to use the ID or class call to name the page.
This is named ". Divcss", which uses class references in HTML.
1, div within the center of the text around the example of the complete HTML code is as follows:
<! DOCTYPE html>
<meta charset= "Utf-8"/>
<title>div Font Centered Instance </title>
<style>
. Divcss5{text-align:center}
</style>
<body>
<div> I didn't set the center CSS style </div>
<div class= "DIVCSS5" > I will be centered </div>
</body>
2. Example screenshot
Three, Div center around the summary-
For other text fonts or pictures to be in the other page tags (such as: P, span, H1, etc.) within the horizontal center, we also use "text-align:center" to achieve.
Four pictures in the div horizontal Center
Let the picture in the Div object box horizontally centered, and let the text font in the div box horizontally centered css the same.
CSS lets you center the contents of an object in a style word:
Text-align:center
Text-align for content to reside in the object what position attribute
Center value is centered
First, the traditional HTML let the picture horizontally horizontally center Method-
Directly within the Label object with "align=" center "can make the picture horizontally centered inside the object display."
align= the "center" method of use:
<div align= "center" ></div>
align= "Center" center picture Div+css Instance Code:
<! DOCTYPE >
<meta charset= "Utf-8"/>
<title> picture horizontally centered </title>
<body>
<div align= "center" ></div>
</body>
Second, CSS let the picture inside the Div object Center-
Use CSS styles to center a picture in a div (horizontally centered) (Read about: HTML img images)
1, example html+css complete code is as follows:
<! DOCTYPE >
<meta charset= "Utf-8"/>
<title> picture horizontally centered </title>
<style>
. Divcss5{text-align:center}
</style>
<body>
<div class= "DIVCSS5" ></div>
</body>
2, Horizontal Center instance screenshot
Summary:
Regardless of the center of the text, the center of the picture, and so on, we can use the above two methods to achieve, generally recommended to use CSS, but the Web page more often, we only need to modify the CSS file corresponding to a selector style can be modified content center, left, reside right
CSS Background image centered
Center horizontally:
Background:url (photo address) No-repeat Center
Center vertically:
Background:url (photo address) No-repeat left 50%
Here 50% is randomly set to enter the 50% distance, the details of the specific vertical and horizontal need to be set by the percentage balance.
4. General case of background picture
Body Settings page Background CSS code
Body{background:url (/img201301/divcss5-logo-2013.gif) no-repeat 0 0}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
