Központosító elemekkel függőlegesen tiszta CSS

Mostanáig a CSS volt a probléma, hogy fut túlnyomórészt mentén egyetlen tengely. A szövegkörnyezettől függően lehet, hogy függőleges vagy vízszintes tengely. És ez jó a verem blokk elemek (egymás mögött a másik), például:

display: block; szélesség: 100%;

Inline-block és a blokk elemek mezők

Elemeket, amelyek bejelentett inline-blokk vagy blokk lehet vízszintesen középre a bal és jobb margó (margó), amelyek automatikus kiszámítása:

display: block; margin-left: auto; margin-right: auto;

A Table Layout

Legegyszerűbb és leggyorsabb módja annak, hogy egy elem függőlegesen középre -, hogy nem egy táblázat cella elem: például a display: table és display: table-cell stílust rendelhetünk vertical-align: közép;

Ha központtól elemek CSS segítségével 2D-transzformáció, akkor a felhasználók, akik sajnos beragadt régi böngészők (ennek az oka: nem akarnak, vagy nem lehet frissíteni vagy korlátozások miatt a cég, ahol dolgoznak) nem szolgált. Számukra, a honlap nem jelenik meg helyesen. De akkor a mentés opció - például használja Modernizr hogy érzékeli a CSS transzformáció és az alternatív módszerek használatára elérni ugyanazt a hatást böngészők, amelyek nem támogatják ezt a technológiát.

Annak érdekében, hogy támogassa a WebKit felhasználók, akkor kell használni a prefix kifejezetten böngészők ez a motor, vagyis -webkit-. Ez egy kicsit furcsa, mert az Internet Explorer, és ez 10 és annál támogatja az átalakítás tulajdonság nélkül előtagot-MS.

Ezen felül, akkor támogatja azt az elképzelést kecses lebomlás (hibatűrésre ügyfél webes felület) és a progresszív növelése (progresszív javulás), amely lehetővé teszi a felhasználók számára, vizuálisan tökéletes, de teljesen működőképes honlapján.

Kapcsolódó cikkek