Wyśrodkowanie lementu na stronie

Odpowiedz Nowy wątek
2013-03-01 15:37
TesterWeb
0

Potrzebuję zrobić tak by mój gif wyświetlił się na środku ekranu.
Jeśli strona jest długa to przy przesuwaniu gif cały czas ma być na środku ekranu.
Nie może on też blokować innych elementów na stronie (czyli wielki niewidzialny div z przodu chyba odpada).

Próbowałem coś takiego w sekcji body:

<div id='container' style='z-index:1000; position: absolute; text-align:center; margin: 50%;'>
     <img style='display: block; margin-left: auto; margin-right: auto' alt='...' src='obrazek.gif' />
</div>

ale efekt jest taki że ten gif pojawia się na środku w poziomie, na dole w pionie i przesuwa się wraz ze stroną...
Pomóżcie, pls

Pozostało 580 znaków

2013-03-05 09:32
TesterWeb
0

Naprawdę nikt??? o.O

Pozostało 580 znaków

2013-03-05 10:26
0

Użyj

position:fixed; margin:auto; vertical-align:middle

Tylko uwaga z margin - z tego co widziałem to IE ma z tym problem

EDIT:
Sprawdzałem jeszcze i margin: auto u mnie nie chwyta. Zamiast tego możesz też użyć left:47% na przykład - jeżeli masz stałą szerokość to wystarczy

edytowany 6x, ostatnio: Sarrus, 2013-03-05 10:37

Pozostało 580 znaków

2013-03-05 14:59
TesterWeb
0
Sarrus napisał(a):

Użyj

position:fixed; margin:auto; vertical-align:middle

Tylko uwaga z margin - z tego co widziałem to IE ma z tym problem

EDIT:
Sprawdzałem jeszcze i margin: auto u mnie nie chwyta. Zamiast tego możesz też użyć left:47% na przykład - jeżeli masz stałą szerokość to wystarczy

Dzięki za odpowiedź.
Niestety gif pojawia się teraz na środku w poziomie i na samej górze ekranu w pionie.
Sprawdzane na Chrome i Firefox.

Pozostało 580 znaków

2013-03-05 15:17
1
<!doctype html>
<html>
<head>
    <style>
        body { width: 100%; height: 3000px; }
        div { position: fixed; width: 20px; height: 20px; background: red; left: 50%; top: 50%; margin-top: -10px; margin-left: -10px; }
        /*
            ujemne marginesy mają być POŁOWĄ długości/szerokości elementu
        */
    </style>
</head>
<body>
<div></div>
</body>
</html>

edytowany 1x, ostatnio: dzek69, 2013-03-05 15:18

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

1 użytkowników online, w tym zalogowanych: 0, gości: 1, botów: 0