The margin property as discussed can also be used to center or align elements. Different technique are used to align elements in a document by using the combination of the auto keyword with the left or right margin of an element. The margin that is given must be either the left or the right margin, because the auto keyword is ignored when applied to the top or bottom margin.
Horizontal alignment is explained with figure by using keywords as values
Center Aligning – Block elements can be aligned by setting the left and right margins to “auto”. Setting the left and right margins to auto specifies that they should split the available margin equally. It is illustrated and used as
.center
{
margin-left:auto;
margin-right:auto;
}
{
margin-left:auto;
margin-right:auto;
}
Left and Right Aligning – In this method of aligning elements absolute positioning is used.
.left
{
position: absolute;
margin-left: 0px;
margin-right:auto;
}
{
position: absolute;
margin-left: 0px;
margin-right:auto;
}
.right
{
position: absolute;
margin-right:0px;
margin-left:auto;
}
{
position: absolute;
margin-right:0px;
margin-left:auto;
}
Aligning In Quirks Mode – The DOCTYPE and the Document Type Declaration selects the rendering mode of the web page but with legacy browsers a quirks mode is encountered.
In quirks mode some CSS features do not work which work well in standards mode. Aligning an element using the auto keyword and the margin property does not work in quirks mode especially in Internet Explorer (IE).
In quirks mode some CSS features do not work which work well in standards mode. Aligning an element using the auto keyword and the margin property does not work in quirks mode especially in Internet Explorer (IE).
A workaround is used by using the text-align property on an element with values of left, center and right as appropriate.
