Adam Rajnoha

webový kodér, hacker, pekař, táta

CSS: centrovaná sekce na plnou šířku v úzkém layoutu

09.09.2021

Občas se stane, že do úzkého webu, na kterém děláme, potřebujeme vložit atypickou sekci. Je to jednoduché, prostě dané sekci nastavíme šířku větší, než je šířka zastropovaná někde seshora. No jo, ale co, když celé má body nějaké pozadí a max-width vycentrovaný pro všechny podřazené sekce, ale ta naše speciální potřebuje mít své vlastní pozadí na celou šířku monitoru, přičemž její obsah musí být stále hezky centrovaný a zarovnaný s jinými sekcemi?

Právě jsem řešil na jednom webu, že hlavní strana má obsah na plnou šířku a podstránky mají obsah zužený na 1200px a margin: auto. No a poslední sekci na podstránce jsem potřeboval vymanit z tohoto omezení a dát ji na plnou šířku, ale nemohl jsem použít position:absolute.

Můžu ji díky CSS3 roztáhnout vždy na plnou šířku monitoru pomocí width: 100vw, to ale pak dostanu něco takového - plně širokou sekci, která začíná zleva spolu s obsahem:

Jak ji vycentrovat, když se odsazení pořád dynamicky bude měnit (100% šířka oproti 1200px hodnotě)?. Použijeme margin kombinovaný se silou calc(), protože v něm můžeme libovolně střídat typy jednotek a zanořovat výpočty pomocí závorek.

Potřebujeme tedy zleva vypočítat margin, a to záporný. Ten se však v kombinaci s calc() neaplikuje, proto vyřešíme vynásobením výpočtu mínus jedničkou.

                
    width: 100vw;
    margin-left: calc(((100vw - 1200px) / 2)*-1);
            

[Enter code here]