Center Div Tag
When designing without a table, a main box (layer) that includes all boxes is generally used. The margin property is used to center this box within the page. As with tables, the align parameter is useless.
As we saw in the previous lesson, the margin property was setting the outer space. If we set the left and right margins to auto , the browser will split the total space around the box to both sides and the box will be centered on the screen.
Warning: Even if we use margin without specifying the width of a box with the width property, the browser will not center that box. We must specify the width with the width so that the remaining gaps can be calculated and distributed equally on both sides.
Expressions like the following can be used to automate left and right spaces.
E.g;
margin: 0 auto;
margin: 5px auto;
margin-left: auto; margin-right: auto;
margin:5px auto 3px auto;
css center divs, center div, box, center layers, align, center, margin 0 auto
EXERCISES
#box1{
background-color: #6C3;
height: 100px;
width: 100px;
margin:5px auto;
}
Read 602 times.