Latest web development tutorials

CSS horizontale Ausrichtung (horizontal ausrichten)

In CSS gibt es mehrere Eigenschaften für die horizontale Ausrichtung Element.


Richten Blockelemente

Block-Element ist ein Element, über die gesamte Breite des vorderen und hinteren Aufnahme werden Zeilenumbrüche.

Beispiele von Blockelementen:

  • <H1>
  • <P>
  • <Div>

Textausrichtung finden Sie in der CSS - Text - Seite. .

In diesem Kapitel werden wir Ihnen zeigen, wie die horizontale Ausrichtung von Layout-Elementen zu blockieren.


Zentriert, margin-Eigenschaft verwenden

Block-Elemente können linken und rechten Rand auf "Auto" Ausrichtung.

Hinweis: Verwenden Sie in IE8 margin: auto - Eigenschaft funktioniert nicht, es sei denn , erklärt DOCTYPE!

Randeigenschaften beliebig aufgeteilt in eine linke und automatisch zugewiesen rechten Randeinstellungen werden kann, ist das Ergebnis die Entstehung des mittleren Element:

Beispiele

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

Versuchen »

Tipp: Wenn die Breite 100% ist, wird die Ausrichtung nicht wirksam ist.

Hinweis: IE5 gibt es einen Spielraum in der Verarbeitungsblockelement BUG.Um das obige Beispiel Arbeit in IE5 zu machen, müssen wir einige zusätzliche Code hinzuzufügen. Beispiele


Mit Hilfe der Position-Eigenschaft auf links, rechtsbündig

Ein Element Ausrichtung ist die absolute Positionierung verwenden:

Beispiele

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Versuchen »

Hinweis: Die absolute Positionierung hat nichts mit dem Fluss des Dokuments zu tun, damit sie andere Elemente auf der Seite abzudecken.


Crosskompatibilitätsprobleme

<P align ähnlich, wenn solche Elemente, eine vorbestimmte Toleranz und Polsterelement immer eine gute Idee ist. Dies ist visuelle Unterschiede in verschiedenen Browsern zu vermeiden.

IE8 und früher ein Problem haben, wenn die Position Eigenschaft. Wenn ein Container-Element (in diesem Fall <div class = "container">) festgelegte Breite ,! DOCTYPE-Deklaration fehlt, IE8 und frühere Versionen werden eine 17px Rand auf der rechten Seite hinzuzufügen. Dies scheint ein Rollreserveraum zu sein. Wenn die Position Eigenschaft verwendet, wird immer in der DOCTYPE-Deklaration festgelegt!

Beispiele

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

Versuchen »


Mit der Eigenschaft float nach links, rechtsbündig

die Eigenschaft float Verwendung ist eine der Ausrichtung-Elemente-Methode:

Beispiele

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Versuchen »


Crosskompatibilitätsprobleme

Elemente wie diese ausgerichtet sind, die vorbestimmten Toleranz und Polsterelement ist immer eine gute Idee. Dies ist visuelle Unterschiede in verschiedenen Browsern zu vermeiden.

IE8 und früher ein Problem haben, wenn der Schwimmer Eigenschaft. Wenn ein Container-Element (in diesem Fall <div class = "container">) festgelegte Breite ,! DOCTYPE-Deklaration fehlt, IE8 und frühere Versionen werden eine 17px Rand auf der rechten Seite hinzuzufügen. Dies scheint ein Rollreserveraum zu sein. Wenn die Eigenschaft float verwendet, wird immer in der DOCTYPE-Deklaration festgelegt!

Beispiele

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

Versuchen »