×
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.
Vytvárame riešenia

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