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:
|
1 2 3 4 5 6 7 |
#innerdiv { width: 50%; margin: 0 auto; } |
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.
|
1 2 3 4 5 6 7 |
#innerdiv { display: table; margin: 0 auto; } |
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
You can also follow some of our broadcasters who program in HTML-CSS as below:
LearnToProgram
awakekatAnother cool way to find out interesting things about HTML/CSS is to access our project page!
