Home > Developer > Web Develop
CSS Advanced
* Snap To block elements
Text-align:center can be used for horizontal alignment of content within a block element;
You can use the margin property for the alignment of the block elements themselves in the layout, and you can align them horizontally by setting the left and right margins to auto.
<!DOCTYPE HTML><HTML><Head><style>. Center{margin:Auto;width:70%;Background-color:#b0e0e6;}</style></Head><Body><Divclass= "Center"><P>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</P><P>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</P></Div><P><b>Comments:</b>Unless it's been declared! DOCTYPE, otherwise the use of Margin:auto is not valid in IE8 and earlier versions.</P></Body></HTML>
It is important to note that unless it has been declared! DOCTYPE, otherwise Margin:auto is invalid in IE8 and earlier versions.
You can also set the left and right alignment by using the Position property.
<!DOCTYPE HTML><HTML><Head><style>. Center{position:Absolute; Right:0;width:70%;Background-color:#b0e0e6;}</style></Head><Body><Divclass= "Center"><P>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</P><P>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</P></Div></Body></HTML>
You can also use float to set up:
<!DOCTYPE HTML><HTML><Head><style>. Right{float: Right;width:300px;Background-color:#b0e0e6;}</style></Head><Body><Divclass= "Right"><P>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</P><P>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</P></Div></Body></HTML>
CSS Advanced Essentials Notes
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
