Live personal coaching - Learn PHP, CSS, JavaScript, jQuery from your home www.onlinecomputerteacher.net

How to align multiple inline and block level child elements inside a container DIV element

Inline Elements : SPAN, IMG etc, Block Levele Elements: P, H1, DIV etc

Left Align

The paragraph inside container DIV.

The H1 tag inside DIV

This is a DIV inside the bordered DIV
A SPAN tag

the text-align:left is the default behaviour. So you can easily omit this.

The Code Here :

<style>
         .container1 {
                  width:75%;
                  border: 1px solid blue;
         }

         .center-align {
                  text-align:center;
          }
         .right-align {
                  text-align: right;
         }
</style>

<div class="container1">
        <p style="background: #99F">The paragraph inside container DIV.</p>
        <h1 style="background:#FF0">The H1 tag inside DIV</h1>
        <div style="background:#09C">This is a DIV inside the bordered DIV</div>
        <span style="background:#C9C">A SPAN tag</span>
</div>

Center Align

The paragraph inside container DIV.

The H1 tag inside DIV

This is a DIV inside the bordered DIV
A SPAN tag

<div class="container1 center-align">
        <p style="background: #99F">The paragraph inside container DIV.</p>
        <h1 style="background:#FF0">The H1 tag inside DIV</h1>
        <div style="background:#09C">This is a DIV inside the bordered DIV</div>
        <span style="background:#C9C">A SPAN tag</span>
</div>

the text-align:center property of container DIV (here <DIV class=”container center-align”>) automatically inherited to the BLOCK LEVEL child elements H1, P and DIV inside <DIV class=”container center-align”>.

Right Align

the text-align:right property of container DIV (here <DIV class=”container right-align”>) automatically inherited to the BLOCK LEVEL child elements H1, P and DIV inside <DIV class=”container right-align”>.

<div class="container1 right-align">
        <p style="background: #99F">The paragraph inside container DIV.</p>
        <h1 style="background:#FF0">The H1 tag inside DIV</h1>
        <div style="background:#09C">This is a DIV inside the bordered DIV</div>
        <span style="background:#C9C">A SPAN tag</span>
</div>

The paragraph inside container DIV.

The H1 tag inside DIV

This is a DIV inside the bordered DIV
A SPAN tag