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>
<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;
}
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;  
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;.

Ako centrovať pozíciu absolute (CSS)

Záver

Comments

Add a comment