6 CSS triky pro zarovnání obsahu svisle

Promluvme si o vertikálním zarovnání v CSS, nebo o tom, jak to není proveditelné. CSS dosud neposkytla oficiální způsob, jak soustředit obsah svisle do kontejneru. Je to problém, který má zřejmě frustrované webové vývojáře všude. Ale v tomto stanovisku se nebudeme bát, budeme vám řídit několik triků, které vám mohou pomoci napodobit účinek.

Tyto triky však mohou mít omezení a možná budete muset používat více než jeden trik dokončit iluzi. Pokud víte o jakémkoli jiném triku, dejte nám vědět v komentářích.

1. Použijte absolutní umístění

První trik, který zde uvidíme, využívá pozice vlastnictví. Máte dvě

, jeden je kontejner, druhý, podřízený prvek, který obsahuje obsah.

Nejprve nastavíme polohu prvku kontejneru na relativní, potom nastavíme pozici podřízeného prvku na absolutní. To nám umožňuje volně ji umístit přes kontejner.

Chcete-li jej svisle zarovnat, přesuňte pozici podřízeného prvku shora, o polovinu výšky kontejneru a vytáhněte ji o polovinu šířky podřízeného prvku. Zde je výstup:

Tento trik je dokonalý, když existuje pouze jeden prvek dítěte, jinak absolutní pozice ovlivní další prvek ve stejné nádobě.

2. Použijte CSS3 Transform

CSS3 Transformace usnadnilo vkládání obsahu do centra. CSS3 Transform, na rozdíl od pozice vlastnictví, neovlivní polohu jiných prvků ve stejné nádobě.

Za předpokladu, že máme stejnou strukturu HTML jako předchozí metoda - jeden rodič, jeden podřízený prvek - 50% shora a pomocí CSS transformace dává překlad -50%. A tady to máte.

Mějte na paměti, že CSS3 Transforms nebude fungovat v aplikaci Internet Explorer 8 a níže. Možná budete chtít použít některou z dalších metod zde jako nouzové.

3. Použijte výplň

Můžeme také použít polstrování vytvořit iluzi vertikálního zarovnání. Chcete-li tak učinit, jednoduše nastavte horní a dolní výplň stejně, a to následovně:

Tento trik je vhodný, když kontejner nenastavíte na pevnou šířku auto.

4. Použijte Výška řádku

Pokud máte v kontejneru pouze jeden řádek textového obsahu, můžete text zarovnat svisle pomocí výška čáry vlastnictví. Nastav výška čáry hodnota pro přibližně stejné jako výška kontejneru a uvidíte následující výstup.

Pamatujte, že tento trik funguje pouze s jedním řádkem textu. Pokud se obsah rozdělí do dvou nebo více řádků, bude prostor mezi každým řádkem tak, jak jsme zadali v výška čáry, nám dává příliš mnoho mezer.

5. Použijte tabulku CSS

Osobně pomocí tabulky CSS je můj oblíbený trik pro použití vertikálního zarovnání. Pracuje ve starých prohlížečích, jako je Internet Explorer 8. Tato metoda se provádí nastavením zobrazení prvku kontejneru na stůl, zatímco podřízený prvek má být zobrazen jako buňka tabulky pak použijte vertikální zarovnání vlastnost na střed textu vertikálně.

6. Použijte Flexbox

Poslední metodou vertikálního centrování je použití Flexboxu. Flexbox je nový modul v CSS3. Nabízí jednodušší způsob zarovnání obsahu. Pro vycentrování obsahu svisle ve flex boxu jednoduše přidejte zarovnat položky: střed; takto, a to je vše.

Mějte na paměti, že některé prohlížeče Flexbox podporují pouze funkce součástí modulu Flexbox, jako jsou Internet Explorer 10, Safari, 6 a Chrome 27 a níže. Proto, podobně jako trik s CSS3 Transform, ujistěte se, že efekt dopadne pěkně v těchto prohlížečích.