Logo F2FInterview

CSS Interview Questions

Q   |   QA

There are two ways of centering block level elements:

1. By setting the properties margin-left and margin-right to auto and width to some explicit value:

BODY {width: 30em; background: cyan;}
P {width: 22em; margin-left: auto; margin-right: auto}

In this case, the left and right margins will each be four ems wide, since they equally split up the eight ems left over from (30em - 22em). Note that it was not necessary to set an explicit width for the BODY element; it was done here to keep the math clean.

Another example:

TABLE {margin-left: auto; margin-right: auto; width: 400px;}
In most legacy browsers, a table's width is by default determined by its content. In CSS-conformant browsers, the complete width of any element (including tables) defaults to the full width of its parent element's content area. As browser become more conformant, authors will need to be aware of the potential impact on their designs.

In order to link this F2FInterview's page as Reference on your website or Blog, click on below text area and pres (CTRL-C) to copy the code in clipboard or right click then copy the following lines after that paste into your website or Blog.

Get Reference Link To This Page: (copy below code by (CTRL-C) and paste into your website or Blog)
HTML Rendering of above code: