6 CSS trikovi za vertikalno usklađivanje sadržaja

Razgovarajmo o vertikalnom poravnanju u CSS-u, točnije kako to nije moguće. CSS još nije osigurao službeni način centriranja sadržaja vertikalno unutar spremnika. To je problem koji je vjerojatno frustrirao web-programere svugdje. Ali ne bojati se, u ovom postu, vodit ćemo vas nekoliko trikova koji vam mogu pomoći imitirajte učinak.

Međutim, ti trikovi mogu imati ograničenja i možda ćete morati koristiti više od jednog trika dovršiti iluziju. Ako znate za bilo koji drugi trik, javite nam u komentarima.

1. Koristite apsolutno pozicioniranje

Prvi trik koji ćemo vidjeti ovdje koristi položaj nekretnine. Imate dvije

, jedan je kontejner, drugi je podređeni element koji sadrži sadržaj.

Najprije ćemo postaviti položaj kontejnerskog elementa na relativan, zatim postaviti položaj dječjeg elementa na apsolutan. To nam omogućuje slobodno stavljanje preko spremnika.

Da biste ga poravnali okomito, pomaknite položaj dječjeg elementa s vrha, za polovicu visine spremnika i povucite ga za polovicu širine dječjeg elementa. Ovdje je izlaz:

Ovaj trik je savršen kada postoji samo jedan element za dijete, inače apsolutan položaj će utjecati na drugi element unutar istog spremnika.

2. Koristite CSS3 Transform

CSS3 Transform olakšalo je postavljanje sadržaja u središte. CSS3 Transform, za razliku od položaj svojstvo, neće utjecati na položaj drugih elemenata unutar istog spremnika.

Uz pretpostavku da imamo istu HTML strukturu kao i prethodna metoda - jedan roditelj, jedan podređeni element - 50% od vrha i pomoću CSS transformacije daje prijevod od -50%. I tu imate.

Imajte na umu da CSS3 Transforms neće raditi u Internet Exploreru 8 i niže. Ovdje možete koristiti bilo koju od drugih metoda kao zamjensku.

3. Upotrijebite Padding

Možemo također koristiti punjenje stvoriti privid vertikalnog poravnanja. Da biste to učinili, jednostavno postavite gornju i donju podlogu jednako, kako slijedi:

Ovaj trik je prikladan kada ne postavite spremnik u fiksnu širinu, samo postavite širinu na auto.

4. Koristite Visina linije

Ako u spremniku imate samo jedan redak tekstualnog sadržaja, tekst možete poravnati okomito pomoću linija visina nekretnine. Postavi linija visina vrijednost za otprilike istu visinu spremnika, i vidjet ćete sljedeći izlaz.

Zapamtite da ovaj trik funkcionira samo s jednim retkom teksta. Ako se sadržaj razbije na dva ili više redaka, razmak između redova bit će onakav kakav smo naveli u linija visina, daje nam previše prostora.

5. Koristite CSS tablicu

Osobno, korištenje CSS tablice je moj omiljeni trik za primjenu vertikalnog poravnanja. Djeluje u starim preglednicima kao što je Internet Explorer 8. Ova metoda se obavlja postavljanjem zaslona spremnika stol, dok se podređeni element prikazuje kao Tablica stanice zatim upotrijebite vertikalno poravnanje središte teksta okomito.

6. Koristite Flexbox

Posljednja metoda vertikalnog centriranja je pomoću Flexboxa. Flexbox je novi modul u CSS3. Nudi jednostavniji način usklađivanja sadržaja. Za centriranje sadržaja okomito u flex box, jednostavno dodajte align-items: centar; kako slijedi, i to je to.

Imajte na umu da Flexbox neki preglednici podržavaju samo djelomične značajke Flexbox modula kao što su Internet Explorer 10, Safari, 6 i Chrome 27 i niže. Dakle, slično triku s CSS3 Transform, pobrinite se da efekt lijepo pada u ovom pregledniku.