To center an element horizontally, use the following CSS code:
The width can be changed to anything but it is required and can not be removed to work correctly.
This code has to be used with the associated HTML code:
Notice that it won't center any text, if you use it for this purpose. Instead use
and
The screenshot from W3C describes how each box, having a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas must be handled. Assigning the 'auto' property to the margin will force the content box to be centered since both the right and the left margin will have an equal value. You now understand why this technique is not working if you dont specify a width for the content itself.
Code :
// hide source code
// hide line numbers
// hide source code
// hide line numbers
1 #center {
2 margin-left: auto;
3 margin-right: auto;
4 width: 100%;
5
The width can be changed to anything but it is required and can not be removed to work correctly.
This code has to be used with the associated HTML code:
Notice that it won't center any text, if you use it for this purpose. Instead use
and
The screenshot from W3C describes how each box, having a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas must be handled. Assigning the 'auto' property to the margin will force the content box to be centered since both the right and the left margin will have an equal value. You now understand why this technique is not working if you dont specify a width for the content itself.
Donation:If you like our free quality work, make a donation by using Paypal and tell us what you would like to see improved on our site for the next few months. |
No comments yet













Page Info













