Fix elem középre igazítása calc segítségével

Fix elem középre igazítása calc segítségével
2022-02-28T09:42:20+01:00
2022-02-28T12:20:13+01:00
2022-10-15T21:21:01+02:00
jimy76
Sziasztok!

Adott egy elem:

.jobbszel {
position: fixed;
right:10px;
top:10px;
display: block;
}

Asztali gépen a weboldal tartalmi része div elemben, 800 px széles (max-width) területen van, középre helyezve.
Azt szeretném elérni, hogy a weboldal jobb oldali változó szélességű rész közepére kerüljön a jobbszel elem. Tehát a right értéke 10 pixel legyen, hanem kalkulált.

Calc segítségével ezt meg lehet csinálni?
Mutasd a teljes hozzászólást!
Hali!

Calc segítségével ezt meg lehet csinálni?

Ha mind a tartalmi elem, mind a fix, lebegő elem szélessége adott (tehát, tudod, nem csak max-width tulajdonság van), akkor igen, tisztán CSS-sel megoldható: right-nak megadod a (100% - <contentWidth>) / 4 - <fixedWidth> / 2 értéket. Azaz, pl. 800px széles tartalmi és 100px széles lebegő elemre:
.jobbszel { … right: calc(25% - 250px); /* Kifejtve: right: calc((100% - 800px) / 4 - 100px / 2); */ … }
Ha a fenti feltételek nem állnak (azaz, nem fix szélességük van az elemeknek, azok változhatnak), akkor tisztán CSS-sel nem oldható meg. Ha JS-rásegítés is ér, akkor eljárhatsz pl. úgy, hogy egy konténer-elemnek (ami tartalmazza a tartalmi elemet és a lebegő dobozt is – lehet akár a body is) megadod style tulajdonságban a tartalmi és a lebegő elem szélességét egyéni CSS-tulajdonságként/-változóként (ezt JS-tel tudod állítani, ha változás történik), a lebegő elem right értékénél pedig felhasználod ezeket, pl.:
<div id="container" style="--contentWidth: 800px; --fixedWidth: 100px;"> <div id="content">…</div> <div class="jobbszel">…</div> </div> .jobbszel { … right: calc((100% - var(--contentWidth)) / 4 - var(--fixedWidth) / 2); … }
Működés közben: JSFiddle

Mutasd a teljes hozzászólást!

  • pontosíts.
    Mutasd a teljes hozzászólást!
  • Hali!

    Calc segítségével ezt meg lehet csinálni?

    Ha mind a tartalmi elem, mind a fix, lebegő elem szélessége adott (tehát, tudod, nem csak max-width tulajdonság van), akkor igen, tisztán CSS-sel megoldható: right-nak megadod a (100% - <contentWidth>) / 4 - <fixedWidth> / 2 értéket. Azaz, pl. 800px széles tartalmi és 100px széles lebegő elemre:
    .jobbszel { … right: calc(25% - 250px); /* Kifejtve: right: calc((100% - 800px) / 4 - 100px / 2); */ … }
    Ha a fenti feltételek nem állnak (azaz, nem fix szélességük van az elemeknek, azok változhatnak), akkor tisztán CSS-sel nem oldható meg. Ha JS-rásegítés is ér, akkor eljárhatsz pl. úgy, hogy egy konténer-elemnek (ami tartalmazza a tartalmi elemet és a lebegő dobozt is – lehet akár a body is) megadod style tulajdonságban a tartalmi és a lebegő elem szélességét egyéni CSS-tulajdonságként/-változóként (ezt JS-tel tudod állítani, ha változás történik), a lebegő elem right értékénél pedig felhasználod ezeket, pl.:
    <div id="container" style="--contentWidth: 800px; --fixedWidth: 100px;"> <div id="content">…</div> <div class="jobbszel">…</div> </div> .jobbszel { … right: calc((100% - var(--contentWidth)) / 4 - var(--fixedWidth) / 2); … }
    Működés közben: JSFiddle

    Mutasd a teljes hozzászólást!
  • Köszönöm szépen!
    A css megoldás nekem tökéletes! :)
    Pedig korábban próbálkoztam, de nem jött össze a képlet! ;)
    Mutasd a teljes hozzászólást!
Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd