×
COOKIES
Prezeraním tejto stránky dochádza k spracovaniu cookies. Spracovaniu cookies zabránite v nastaveniach internetového prehliadača alebo nezobrazovaním tejto stránky v internetovom prehliadači.
Technologický web Mateja Lednára
Spoznávajte svet technológií

Ako centrovať pozíciu fixed (CSS)

Tento článok nadväzuje na článok Ako centrovať pozíciu absolute (CSS), kde tentoraz budem demonštrovať ako centrovať element s CSS vlastnosťou position: fixed;. Centrovanie ukážem na príklade, kde centrovaný element bude mať triedu fixed-center.
Príklad: Základný template v jazyku HTML.
1
2
3
4
5
6
7
<h1>My website</h1>
<div>My website content</div>
<div class="fixed-center">Fixed element</div>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
Elementy <br> otestujú fixáciu elementu s triedou fixed-center.
Príklad: Zápis do elementu <style>.
1
2
3
4
5
6
7
8
9
10
11
12
body {
position : relative;
}
.fixed-center {
width : 400px;
margin: auto;
left: 0;
right: 0;
position: fixed;
text-align: center;
top : 1em;
}
Pre centrovanie fixnej pozície je kľúčové definovať šírku fixne umiestneného elementu, automatické odsadenie a vynulovať pravú a ľavú pozíciu.
Príklad: Kľúčové vlastnosti pre centrovanie fixnej pozície.
1
2
3
4
width : 400px; // custom width
margin: auto;
left: 0;
right: 0;

Záver

Ak nie je definovaná šírka, nie je možné aplikovať vlastnosť margin. Tiež netreba zabudnúť, že parent fixne umiestneného elementu musí mať CSS vlastnosť position: relative;.
HTML,CSS,position,fixed,center,margin
Žiadna časť tohto článku nesmie byť reprodukovaná bez uvedenia autora a URL na túto stránku.
Viac informácií nájdete v sekcii O projekte.

Komentáre

Článok neobsahuje zatiaľ žiadne komentáre.

Pridať komentár

Meno (povinné)
Web
Správa (povinné)
Odoslať
Od najnovších