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.
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;. 29.12.2016, Matej LednárKategória: HTMLHTML,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.
