Die Anleitung zu CSS Align

CSS Align
CSS margin:auto
CSS text-align
CSS float

1. CSS Align

Es gibt keine allgemeinen Regelungen, damit Sie ein Element ausrichten. Deshalb sollen Sie nach der Situation eine passende Maßnahmen haben. In diesen Artikel werde ich einige Situationen und die Maßnahme zur Element-Ausrichtung geben.

Horizontal Align

Horizontale Ausrichtung (Horizontal Align) bedeutet den Weg, damit Sie das Element linkt, mittel oder recht anzeigen machen.

Vertical Align

Die vertikale Ausrichtung (Vertical Align) bedeutet den Weg, damit Sie das Element oben, mittel oder unten anzeigen machen.

2. CSS margin:auto

Wenn Sie das Block Element haben, z.B <div> und Sie möchten mittel horizontal ausrichten, ist CSS margin:auto eine gute Maßnahme.

Die Anleitung zu HTML Block/Inline Elements

Sie sollen die Breite für das Element in eine spezielle Zahl oder eine Prozent-Wert einstellen, es muss aber weniger als 100% sein, das guarantiert, dass das Element den ganzen horizontalen Raum des Element, das es enthält, nicht besetzt.

Und wenden Sie CSS margin:auto für es an.

margin-left: auto;
margin-right: auto;

/* OR:  */

margin: auto;

Achtung: CSS margin-top:auto und CSS margin-bottom:auto wirkt nicht als die vertikale Ausrichtung.

h-align-block-example.html

<!DOCTYPE html>
<html>
<head>
    <title>CSS Align</title>
    <meta charset="UTF-8"/>
    <style>
        .center {
           margin-left: auto;
           margin-right: auto;
           width: 180px;
           border: 3px solid green;
           padding: 10px;
        }
    </style>
</head>
<body>
    <h3>Horizontal Align - Center</h3> 
    <hr/>
    <div class = "center">
         margin-left: auto; <br/>
         margin-right: auto; <br/>
         width: 180px; <br/>
         border: 3px solid green; <br/>
         padding: 10px;<br/>
    </div>
</body>
</html>

3. CSS text-align

Das Property CSS text-align wird für das Block Element oder eine Zelle der Tabelle benutzt um ihre Inline-Inhalt horizontal auszurichten.

Wenn CSS text-align für ein Element angewendet wird, wirkt es mit allen Inline-Inhalt dieses Element, z.B die Text-Inhalt, die Sub-Element wie <span>,.. Aber es wirkt mit die Sub-Block des momentanen Element nicht.

Die Anleitung zu CSS text-align

4. CSS float

Die Anleitung zu CSS Float und Clear