Sandkasten

In der Nähe des Rektors 11. Oktober 2013 um 17:17 Uhr

Bilder auf einer Seite zentrieren

• CSS
• HTML

Einführung

Ich löse gerne interessante Layoutprobleme, und angesichts meiner etwas mehr als fünfjährigen Erfahrung auf diesem Gebiet kommen solche Probleme nicht oft vor.
Ich bin kürzlich auf mehrere dieser Probleme gestoßen:

1. Zentrieren Sie das Bild in der Mitte der Seite und komprimieren Sie es, wenn Sie die Größe des Browsers ändern.

Im Prinzip können sowohl die erste als auch die zweite Aufgabe mit kleinem Javascript gelöst werden, aber ich wollte es sinnvoll mit HTML+CSS machen.
Die Aufgabe wurde auch dadurch erleichtert, dass die Website, auf der dies verwendet werden sollte, modern entwickelt wurde und die Unterstützung auf ie9+, FF, Chrome, Safari, Opera beschränkt war.

2. Absolute Zentrierung des Bildes, unabhängig von der Größe des Browserfensters.

Aber daran musste ich herumbasteln. Die ursprüngliche Idee war folgende:

.wrapper( Überlauf: versteckt; Position: fest; oben: 0; rechts: 0; unten: 0; links: 0; ) .item( Position: absolut; oben: 50 %; links: 50 %; Anzeige: Inline-Block ; ) .item img( Marge: -50 % 0 0 -50 %; )

Die Idee basierte auf folgender Logik:

• Externer Block, .Verpackung, auf die gesamte freie Breite und Höhe gedehnt.
• Innengerät, .Artikel, nimmt die Breite und Höhe des Bildes an, das sich darin befindet, da es sich um einen Inline-Block handelt; und wird mit der oberen linken Ecke in der Mitte des übergeordneten Blocks platziert.
• Platzieren Sie das Bild mit einem Minusrand, der es genau in der Mitte hätte ausrichten sollen .Verpackung

Aber eine völlig logische Idee wurde durch eine noch logischere Abhängigkeit unterbrochen. Die 50-prozentige Polsterung wird basierend auf der halben Höhe oder Breite des übergeordneten Elements berechnet. In meinem Fall wurden die Breite und Höhe des übergeordneten Elements auf der Breite und Höhe des Bildes aufgebaut, und nachdem das Bild um -50 % verschoben wurde, wurde das übergeordnete Element .Artikel, verringerte sich um die gleichen 50 % und der Kreis schloss sich.

Ich habe dies entschieden, indem ich mich an transform erinnert habe, oder genauer gesagt an seine Translate-Funktion, die die Anzeige eines Objekts zu verschieben scheint, aber die Stelle verlässt, an der es war. Und es stellte sich heraus, dass durch Ersetzen des Bildrands durch transform: translator(-50%, -50%); Das Problem wird sofort gelöst. Und das ist am Ende herausgekommen:

*( Polsterung: 0; Rand: 0; vertikale Ausrichtung: oben; ) html, body( Breite: 100 %; Höhe: 100 %; ) .wrapper( Überlauf: versteckt; Position: fest; oben: 0; rechts: 0 ; unten: 0; links: 0; ) .item( Position: absolut; oben: 50%; links: 50%; Anzeige: inline-block; ) .item img( -webkit-transform: Translate(-50%, - 50 %); -moz-transform: Translate(-50 %, -50 %);

PS: Ich bin mir nicht sicher, ob das die einzigen Optionen sind oder nicht. Ich glaube nicht, dass diese Optionen für jeden geeignet sind.
Aber ich weiß mit Sicherheit, dass es, wenn sie in meinem Fall geeignet wären, Leute geben wird, denen sie bei ihren Aufgaben wahrscheinlich sehr hilfreich sein werden. Wenn Sie dem Code außerdem ein wenig Code hinzufügen, können Sie Krücken für ältere IE hinzufügen. Ich habe es nicht hinzugefügt, weil ich den sauberen Code nicht wegen sehr veralteter Browser verderben wollte.
PS2: Kritik und Ratschläge sind herzlich willkommen. Vielen Dank, dass Sie bis zum Ende gelesen haben.

Tags: HTML, CSS, CSS3, Bild, Bild, Bild, Ausrichtung, vertikale Ausrichtung

Dieser Artikel kann nicht kommentiert werden, da der Autor noch kein vollwertiges Mitglied der Community ist. Sie können den Autor erst kontaktieren, nachdem er eine Einladung von jemandem aus der Community erhalten hat. Bis zu diesem Zeitpunkt wird sein Benutzername durch einen Alias ​​verborgen bleiben.

Sandkasten

Behörde 11. Oktober 2013 um 17:17 Uhr

Bilder auf einer Seite zentrieren

Einführung

Ich löse gerne interessante Layoutprobleme, und angesichts meiner etwas mehr als fünfjährigen Erfahrung auf diesem Gebiet kommen solche Probleme nicht oft vor.
Ich bin kürzlich auf mehrere dieser Probleme gestoßen:

1. Zentrieren Sie das Bild in der Mitte der Seite und komprimieren Sie es, wenn Sie die Größe des Browsers ändern.

Im Prinzip können sowohl die erste als auch die zweite Aufgabe mit kleinem Javascript gelöst werden, aber ich wollte es sinnvoll mit HTML+CSS machen.
Die Aufgabe wurde auch dadurch erleichtert, dass die Website, auf der dies verwendet werden sollte, modern entwickelt wurde und die Unterstützung auf ie9+, FF, Chrome, Safari, Opera beschränkt war.

2. Absolute Zentrierung des Bildes, unabhängig von der Größe des Browserfensters.

Aber daran musste ich herumbasteln. Die ursprüngliche Idee war folgende:

.wrapper( Überlauf: versteckt; Position: fest; oben: 0; rechts: 0; unten: 0; links: 0; ) .item( Position: absolut; oben: 50 %; links: 50 %; Anzeige: Inline-Block ; ) .item img( Marge: -50 % 0 0 -50 %; )

Die Idee basierte auf folgender Logik:

• Externer Block, .Verpackung, auf die gesamte freie Breite und Höhe gedehnt.
• Innengerät, .Artikel, nimmt die Breite und Höhe des Bildes an, das sich darin befindet, da es sich um einen Inline-Block handelt; und wird mit der oberen linken Ecke in der Mitte des übergeordneten Blocks platziert.
• Platzieren Sie das Bild mit einem Minusrand, der es genau in der Mitte hätte ausrichten sollen .Verpackung

Aber eine völlig logische Idee wurde durch eine noch logischere Abhängigkeit unterbrochen. Die 50-prozentige Polsterung wird basierend auf der halben Höhe oder Breite des übergeordneten Elements berechnet. In meinem Fall wurden die Breite und Höhe des übergeordneten Elements auf der Breite und Höhe des Bildes aufgebaut, und nachdem das Bild um -50 % verschoben wurde, wurde das übergeordnete Element .Artikel, verringerte sich um die gleichen 50 % und der Kreis schloss sich.

Ich habe dies entschieden, indem ich mich an transform erinnert habe, oder genauer gesagt an seine Translate-Funktion, die die Anzeige eines Objekts zu verschieben scheint, aber die Stelle verlässt, an der es war. Und es stellte sich heraus, dass durch Ersetzen des Bildrands durch transform: translator(-50%, -50%); Das Problem wird sofort gelöst. Und das ist am Ende herausgekommen:

*( Polsterung: 0; Rand: 0; vertikale Ausrichtung: oben; ) html, body( Breite: 100 %; Höhe: 100 %; ) .wrapper( Überlauf: versteckt; Position: fest; oben: 0; rechts: 0 ; unten: 0; links: 0; ) .item( Position: absolut; oben: 50%; links: 50%; Anzeige: inline-block; ) .item img( -webkit-transform: Translate(-50%, - 50 %); -moz-transform: Translate(-50 %, -50 %);

PS: Ich bin mir nicht sicher, ob das die einzigen Optionen sind oder nicht. Ich glaube nicht, dass diese Optionen für jeden geeignet sind.
Aber ich weiß mit Sicherheit, dass es, wenn sie in meinem Fall geeignet wären, Leute geben wird, denen sie bei ihren Aufgaben wahrscheinlich sehr hilfreich sein werden. Wenn Sie dem Code außerdem ein wenig Code hinzufügen, können Sie Krücken für ältere IE hinzufügen. Ich habe es nicht hinzugefügt, weil ich den sauberen Code nicht wegen sehr veralteter Browser verderben wollte.
PS2: Kritik und Ratschläge sind herzlich willkommen. Vielen Dank, dass Sie bis zum Ende gelesen haben.

Tags: HTML, CSS, CSS3, Bild, Bild, Bild, Ausrichtung, vertikale Ausrichtung

Dieser Artikel kann nicht kommentiert werden, da sein Autor noch nicht bekannt ist vollwertig Gemeinschaftsmitglied. Sie können den Autor erst kontaktieren, nachdem er ihn erhalten hat Einladung von einem der Community-Mitglieder. Bis zu diesem Zeitpunkt wird sein Benutzername durch einen Alias ​​verborgen bleiben.

Standardmäßig erbt das Bild die Ausrichtungseigenschaften seiner übergeordneten Tags. Wenn diese nicht angegeben sind, wird das Bild standardmäßig linksbündig ausgerichtet. In diesem Artikel schauen wir uns an, wie man ein Bild in CSS in der Mitte sowie rechts und links ausrichtet.

So zentrieren Sie ein Bild in CSS

Um ein Bild in CSS zu zentrieren, werden die folgenden Eigenschaften verwendet:

1. Anzeige (Art der visuellen Anzeige). Standardmäßig entsprechen die Ränder eines Bildelements den Abmessungen (Breite, Höhe) und diese Eigenschaft ermöglicht keine Anzeige in der Mitte. Daher müssen Sie das Bild zunächst in ein Blockelement umwandeln, das die gesamte Breite des übergeordneten Blocks einnimmt und gleichzeitig die Abmessungen des Bildes beibehält. Dadurch wird das Bild in der Mitte seines eigenen Blocks angezeigt. Um die Eigenschaft eines Bildes als Blockelement festzulegen, das die gesamte Breite einnimmt, verwenden Sie die Eigenschaft display:block.

2. Rand (äußere Ränder). Für die Randeigenschaft: y1 x1 y2 x2 sind die Werte y1 x1 y2 x2 für den Rand oben, rechts, unten bzw. links verantwortlich. Wenn Sie anstelle der Einzüge x1 und x2 auto in CSS schreiben, wird das Bild in der Mitte relativ zur horizontalen Ebene ausgerichtet.

Beispielcode zum Zentrieren eines Bildes

Ergebnis im Browser

Seitencode

So richten Sie mehrere Bilder in CSS zentriert aus

Es gibt häufig Fälle, in denen Sie mehrere Bilder in CSS zentriert ausrichten müssen. In diesen Fällen ist es praktisch, eine übergeordnete Div-Ebene zu verwenden, die Bilder enthält. Die übergeordnete Div-Ebene selbst wird benötigt, um die Bilder zu zentrieren.

Das Zentrieren mehrerer Bilder in CSS erfolgt, indem alle Bilder in einem übergeordneten Tag platziert werden