×
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 absolute (CSS)

V tomto článku uvediem, ako centrovať element, ktorý má position: absolute;. Centrovanie ukážem na jednoduchom príklade, kde centrovať budem element s triedou absolute-center.
Príklad: Základný template v jazyku HTML.
1
2
3
4
5
<body>
<h1>My website</h1>
<div>My website content</div>
<div class="absolute-center">Absolutely positioned element</div>
</body>
Príklad: Zápis do elementu <style>.
1
2
3
4
5
6
7
8
9
10
11
12
body {
position : relative;
}
.absolute-center {
width : 400px;
margin: auto;
left: 0;
right: 0;
position: absolute;
text-align: center;
top : 1em;
}
Pre centrovanie absolútnej pozície je kľúčové definovať šírku absolútne umiestneného elementu, automatické odsadenie a vynulovať pravú a ľavú pozíciu.
Príklad: Kľúčové vlastnosti pre centrovanie absolútnej 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 absolútne umiestneného elementu musí mať position: relative;.


CSS,position,absolute,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