Education Ecosystem Blog

Have you worked with div blocks? If yes, you already know how simple they can be. However, complexity can arise due to how you can stack simple concepts on top of one another. If you are looking to center a block element div in a div horizontally, then just use the following CSS code:

#innerdiv {

width: 50%;

margin: 0 auto;

}

The above code is for inner div of your HTML. We are using CSS to do the centering. The outer div can be of any width, all the way to 100%. All you need to make sure of is that the inner div width is less than the width of the outer div.

The magic line here is margin: 0 auto,  which centers the inner div.

What should you do if you want to make it work for IE8?

We all know supporting IE8 can be a pain. For the above to work in IE8, you need to use the following CSS.

#innerdiv {

display: table;

margin: 0 auto;

}

As div is a block-level element, the above CSS will work flawlessly.

Do you have anything to add to the tutorial? Then comment below and let us know.

You can also check on our website for videos about HTML/CSS. Below are some examples:

• HTML5 App Development (part 1) – HTML5

• Website Update (part 2) – HTML5

You can also follow some of our broadcasters who program in HTML-CSS as below:

 LearnToProgram

 awakekat

Another cool way to find out interesting things about HTML/CSS is to access our project page!