DIV itself horizontal align left center right - HTML tag & code practical example for blog

This page explains how to center the DIV itself  horizontally. On the blog or homepage, a DIV area is in the parent area. So, we can align it as desired by setting the margin in the DIV that we want to center. If you follow the example below, you will be able to do it easily.


Example : center the DIV itself horizontally

<div style=" border: 1px solid red;">
<div style="margin: 0 auto; width:50%; border: 3px dotted blue;">
Contents........
................
................
</div>
</div>

Actual results:

Contents........
................
................

Example : right the DIV itself horizontally

<div style="border: 1px solid red;">
<div style="border: 3px dotted blue; margin: 0 0 0 auto; width: 50%;">
Contents........
................
................
</div>
</div>

Actual results:

Contents........
................
................

Example : left the DIV itself horizontally

<div style="border: 1px solid red;">
<div style="border: 3px dotted blue; margin: 0 auto 0 0; width: 50%;">
Contents........
................
................
</div>
</div>

Actual results:

Contents........
................
................

The example on this page is not theoretical but practical. We sometimes experience the difference between theory and practice in running our homepage or blog. Theories are needed to solve problems, but practical solutions are more important. This page is for that.