Die Anleitung zu CSS Align

View more Tutorials:

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.
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.

4- CSS float

View more Tutorials: