Dynamiczne centrowanie elementu w kontenerze za pomocą CSS

Jeśli chodzi o pisanie o programowaniu, rzadko mówię o rzeczach poza PHP i JavaScript, głównie dlatego, że pracuję z tymi językami częściej niż z innymi.

Mam na myśli, że tak, CSS jest częścią umowy, podobnie jak HTML, ale w dzisiejszych czasach oczekuje się tego, prawda?

Więc jeśli kiedykolwiek pojawiła się dla mnie szybka wskazówka dotycząca CSS, to jest to (choć może powinienem napisać więcej?). Ciężko jest, gdy Chris wykonuje taką niesamowitą robotę przy uruchamianiu sztuczek CSS, ale ja robię dygresję.

W każdym razie oto problem i rozwiązanie.

Dynamiczne centrowanie elementu w kontenerze

Idea dynamicznego centrowania elementu opiera się na następującym scenariuszu:

• Wykonujesz wywołanie do interfejsu API, który będzie odpowiadał zestawem, powiedzmy, obrazów po zakończeniu wywołania.
• Musisz wyśrodkować każdy obraz w jego kontenerze.
• Obrazy nie będą miały stałej wysokości i będą musiały być dynamicznie pozycjonowane i wyśrodkowane w kontenerach w interfejsie użytkownika.

Być może jest to jeszcze trochę ogólne. Jeśli tak, załóżmy, że masz listę (uporządkowaną lub nieuporządkowaną, nie ma to znaczenia). Mają ustaloną wysokość i szerokość, a obrazy będą skalowane w każdym elemencie.

Pamiętaj: nie możesz umieszczać elementów takich jak elementy div w elementach li (ponieważ div jest elementem na poziomie bloku) bez zmiany go za pomocą jakiegoś CSS. I chcemy tego uniknąć.

Więc ostatecznie interfejs użytkownika może wyglądać mniej więcej tak (nieproszony, wiem):

Jeśli chcesz, aby każdy obraz został umieszczony w elemencie listy, chcesz, aby miał określoną wysokość w skali i chcesz, aby był wyśrodkowany, wypróbuj następujący fragment kodu :

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

Kluczem do tego jest styl transformacji. Według MDN :

Funkcja CSS translateY() zmienia położenie elementu w pionie na płaszczyźnie 2D. Jego wynikiem jest typ danych.

Ma sens?

Pomyśl o tym w ten sposób: funkcja translateY pobierze dany element (zidentyfikowany przez jego selektor) i ustawi go przy użyciu określonej wartości.

Chodzi o transformacje

Możesz użyć pikseli, wartości procentowych lub czegokolwiek, czego potrzebujesz, aby to się stało. W tym przypadku są to wartości procentowe (i są ujemne). Chociaż używam przykładu mojej implementacji, ma on również stanowić wskazówkę, jak używać funkcji transformY w odniesieniu do przekształceń.

Jeśli kompatybilność przeglądarki ma znaczenie – co w niektórych przypadkach powinna – sprawdź ten wykres. Jesteś całkiem dobrze zabezpieczony.