CSS: centrovaná sekce na plnou šířku v úzkém layoutu
09.09.2021Obč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);