Dynamisches Zentrieren eines Elements in einem Container mithilfe von CSS

Wenn es darum geht, über Entwicklung zu schreiben, spreche ich nicht oft über Dinge jenseits von PHP und JavaScript, hauptsächlich weil ich mehr mit diesen Sprachen arbeite als mit anderen.

Ich meine, ja, CSS ist genauso Teil des Deals wie HTML, aber es wird heutzutage erwartet, oder?

Wenn es also jemals einen schnellen Tipp für mich zu CSS gab, dann das hier (obwohl ich vielleicht mehr schreiben sollte?). Es ist schwer, wenn Chris mit CSS Tricks so einen tollen Job macht, aber ich schweife ab.

Wie auch immer, hier ist das Problem und die Lösung.

Dynamisches Zentrieren eines Elements in einem Container

Die Idee, ein Element dynamisch zu zentrieren, basiert auf folgendem Szenario:

• Sie rufen eine API auf, die nach Abschluss des Aufrufs beispielsweise mit einer Reihe von Bildern antwortet.
• Sie müssen jedes Bild in seinem Container zentrieren.
• Die Bilder haben keine feste Höhe und müssen innerhalb der Container in der Benutzeroberfläche dynamisch positioniert und zentriert werden.

Vielleicht ist das noch ein bisschen allgemein gehalten. Wenn ja, nehmen wir an, Sie haben eine Liste (geordnet oder ungeordnet, es spielt keine Rolle). Sie haben eine feste Höhe und Breite, und Sie werden die Bilder skaliert innerhalb jedes Elements platzieren.

Denken Sie daran: Sie können Dinge wie div – Elemente nicht innerhalb von li – Elementen platzieren (da ein div ein Element auf Blockebene ist), ohne es über CSS zu ändern. Und das wollen wir vermeiden.

Letztendlich könnte die Benutzeroberfläche also ungefähr so ​​​​aussehen (grob, ich weiß):

Wenn Sie möchten, dass jedes Bild innerhalb des Listenelements platziert wird, Sie möchten, dass es eine bestimmte skalierte Höhe hat, und Sie möchten, dass es zentriert ist, versuchen Sie den folgenden Code :

.acme-element {
  position:   relative;
  top:        50%;
  transform:  translateY(-50%);
  height:     auto;
  max-height: 190px;
}

Der Schlüssel dazu ist wirklich der Transformationsstil. Laut MDN :

Die CSS-Funktion translateY() positioniert ein Element vertikal auf der 2D-Ebene neu. Sein Ergebnis ist ein Datentyp.

Sinn ergeben?

Stellen Sie sich das so vor: Die Funktion translateY nimmt ein bestimmtes Element (identifiziert durch seinen Selektor) und positioniert es unter Verwendung des angegebenen Werts.

Es geht um Transformationen

Sie können Pixel, Prozentsätze oder was auch immer Sie benötigen, verwenden, um dies zu erreichen. In diesem Fall sind es Prozentsätze (und sie sind negativ). Obwohl ich ein Beispiel meiner Implementierung verwende, soll es auch ein Tipp zur Verwendung der transformY –  Funktion in Bezug auf Transformationen sein.

Wenn die Browserkompatibilität wichtig ist – was in einigen Fällen der Fall sein sollte – sehen Sie sich diese Tabelle an. Du bist ziemlich gut abgesichert.