Centratura dinamica di un elemento in un contenitore mediante CSS

Quando si tratta di scrivere di sviluppo, non parlo spesso di cose oltre a PHP e JavaScript principalmente perché lavoro con quei linguaggi più di altri.

Voglio dire, sì, CSS fa parte dell’accordo così come HTML, ma è previsto in questi giorni, giusto?

Quindi, se c’è mai stato un suggerimento rapido da offrire per quanto riguarda i CSS, è questo (anche se forse dovrei scrivere di più?). È difficile quando Chris fa un lavoro così fantastico eseguendo CSS Tricks, ma sto divagando.

Comunque, ecco il problema e la soluzione.

Centratura dinamica di un elemento in un contenitore

L’idea di centrare dinamicamente un elemento si basa sul seguente scenario:

• Stai effettuando una chiamata a un’API che risponderà con una serie, ad esempio, di immagini una volta completata la chiamata.
• Devi centrare ogni immagine all’interno del suo contenitore.
• Le immagini non avranno un’altezza fissa e dovranno essere posizionate e centrate dinamicamente all’interno dei contenitori nell’interfaccia utente.

Forse questo è ancora un po’ generale. Se è così, supponiamo che tu abbia una lista (ordinata o non ordinata, non importa). Hanno un’altezza e una larghezza fisse e posizionerai le immagini, in scala, all’interno di ogni elemento.

Ricorda: non puoi posizionare elementi come  elementi div all’interno di elementi li (perché un div è un elemento a livello di blocco) senza modificarlo tramite alcuni CSS. E vogliamo evitare di farlo.

Quindi, alla fine, l’interfaccia utente potrebbe assomigliare a questo (grezzo, lo so):

Se vuoi che ogni immagine sia posizionata all’interno dell’elemento dell’elenco, vuoi che abbia una certa altezza in scala e vuoi che sia centrata, prova il seguente bit di codice :

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

La chiave per questo, davvero, è lo stile di trasformazione. Secondo MDN :

La funzione translateY() CSS riposiziona un elemento verticalmente sul piano 2D. Il risultato è un tipo di dati.

Ha senso?

Pensala in questo modo: la funzione translateY prenderà un dato elemento (identificato dal suo selettore) e lo posizionerà usando il valore specificato.

Si tratta di trasformazioni

Puoi usare pixel, percentuali o qualunque cosa ti serva per realizzarlo. In questo caso, sono le percentuali (e sono negative). Sebbene io stia usando un esempio della mia implementazione, vuole anche essere un suggerimento su come usare la funzione transformY in relazione alle trasformazioni.

Se la compatibilità del browser è importante, cosa che, in alcuni casi, dovrebbe, dai un’occhiata a questo grafico. Sei abbastanza ben coperto.