CSS-Schnipsel - Block-Level-Element: Ausrichtung

Container-Ausrichtung - Platzierung von DIV-Containern

(Alle unten aufgeführten Lösungen funktionieren auch mit dem Internet Explorer 5.x und 6)

Dieser Code-Schnipsel zentriert einen <div>-Container:

  div.center {text-align:center;}

  div.center p
  {
    margin-left:auto;
    margin-right:auto;
    padding:4px;
    text-align:left;
    width:60%;
    color:#000000;
    background-color:#FFFFFF;
    border:none;
  }
    

HTML Code-Beispiel:

  <div class="center">
    <p>
      Beliebiger Inhalt
    </p>
  </div>
    

Folgender Code platziert die Box auf der rechten Seite:

  div.right {text-align:right;}

  div.right p
  {
    margin-left:auto;
    margin-right:0;
    padding:4px;
    text-align:left;
    width:60%;
    color:#000000;
    background-color:#FFFFFF;
    border:none;
  }
    

HTML Code-Beispiel:

  <div class="right">
    <p>
      Beliebiger Inhalt
    </p>
  </div>
    

Nur der Vollständigkeit halber untenstehender Schnipsel:

  div.left {text-align:left;}

  div.left p
  {
    /* linksbündig - Voreinstellung (daher nicht wirklich notwendig) */
    margin-left:0;
    margin-right:auto;
    padding:4px;
    text-align:left;
    width:60%;
    color:#000000;
    background-color:#FFFFFF;
    border:none;
  }
    

So funktioniert es (für Einzelheiten empfiehlt sich ein Blick auf den Quelltext):