×
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.
Creating solutions

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
No part of this article may be reproduced without mention of the author and URL to this website.
For more information, see the About section.

Comments

Article has no comments.

Add a comment

Name (required)
Website
Message (required)
Submit
From latest