Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> Wycentrowanie diva (góra - dół)
Sexee
post
Post #1





Grupa: Zarejestrowani
Postów: 48
Pomógł: 0
Dołączył: 31.03.2012

Ostrzeżenie: (0%)
-----

Mam na myśli wyśrodkowanie w pionie, która funkcja za to odpowiada? Dawno się w tym nie bawiłem i zapomniałem.

EDIT: Szukam i szukam ale chyba nic takiego nie ma, trzeba się bawić procentami, pikselami i tak dalej. A szkoda, bo to podstawa. W CSS 4 powinni to zrobić, bo w kółko ciągłe kombinacje - choćby jedną funkcję, która tylko centruje i jednocześnie zostawić obecny sposób, bo nie zawsze robi się takie rzeczy by coś wyśrodkować. Jak ktoś zna w miarę prosty sposób, ale na DIVA to niech napisze. Mi się tylko na czcionkę udaje znaleźć takie w miarę fachowe centrowanie.

Ten post edytował Sexee 1.04.2012, 21:03:49
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi (1 - 5)
by_ikar
post
Post #2





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

Ostrzeżenie: (0%)
-----

A po co tutaj jakieś funkcje? Proste 

[CSS] pobierz, plaintext 
  1. margin: auto; 
[CSS] pobierz, plaintext


czy nawet 

[CSS] pobierz, plaintext 
  1. margin-top: 50%; 
[CSS] pobierz, plaintext


i nie trzeba tutaj żadnej wiedzy. A jeżeli to ma być jakiś div który ma się znajdować nad innymi, to 

[CSS] pobierz, plaintext 
  1. position: absolute; top: 50%; left: 50%; 
[CSS] pobierz, plaintext


i po sprawie.
Go to the top of the page
+Quote Post
mortus
post
Post #3





Grupa: Zarejestrowani
Postów: 2 178
Pomógł: 596
Dołączył: 25.09.2009
Skąd: Piwniczna-Zdrój

Ostrzeżenie: (0%)
-----

@by_ikar: Żaden z podanych przez Ciebie stylów CSS nie wyśrodkuje div-a w pionie. margin: auto nie zadziała w ogóle, margin-top: 50% przesunie div-a poniżej połowy strony, tak, że górna jego krawędź będzie w połowie. Jedynie trzecia propozycja przy ustawieniu dodatkowych atrybutów CSS zadziała jak trzeba:
[CSS] pobierz, plaintext 
  1. div {
  2.   margin-top: -250px;
  3.   margin-left: -300px;
  4.   width: 600px;
  5.   height: 500px;
  6.   position: absolute;
  7.   top: 50%;
  8.   left: 50%;
  9. }
[CSS] pobierz, plaintext

choć nie zagwarantuję, że będzie to działać na wszystkich przeglądarkach. Alternatywą jest obliczenie pozycji div-a w JavaScript i nadpisanie stylu CSS.
Go to the top of the page
+Quote Post
Sexee
post
Post #4





Grupa: Zarejestrowani
Postów: 48
Pomógł: 0
Dołączył: 31.03.2012

Ostrzeżenie: (0%)
-----

No tak.. to nie ma tego co chciałem

Cytat
centering(#div);
I byłoby git a tak to jakieś pierniczenie się z marginesami. Jak to nie zadziała to odpuszczę to sobie bo szkoda na to czasu.

Plusy dla was (IMG:style_emoticons/default/biggrin.gif)
Go to the top of the page
+Quote Post
by_ikar
post
Post #5





Grupa: Zarejestrowani
Postów: 1 798
Pomógł: 307
Dołączył: 13.05.2009
Skąd: Gubin/Wrocław

Ostrzeżenie: (0%)
-----

Cytat(mortus @ 2.04.2012, 09:14:54 ) *
@by_ikar: Żaden z podanych przez Ciebie stylów CSS nie wyśrodkuje div-a w pionie. margin: auto nie zadziała w ogóle, margin-top: 50% przesunie div-a poniżej połowy strony, tak, że górna jego krawędź będzie w połowie. Jedynie trzecia propozycja przy ustawieniu dodatkowych atrybutów CSS zadziała jak trzeba


W przypadku margin: auto, nie byłem pewien, dlatego podałem margin-top: 50% jako dodatek, a nie jedyne użycie, tyle że o tym nie wspomniałem.. Można to również zrobić marginesem, tyle że nie będzie to tak uniwersalne, ponieważ margines górny/dolny trzeba określić w zależności od wielkości elementu: http://jsfiddle.net/4d7sb/ im większy element, tym margines dolny/górny jest mniejszy. Można dodać do tego position absolute, można pobawić się w position fixed. Jak komu jest to potrzebne.
Go to the top of the page
+Quote Post
adrianbienias.pl
post
Post #6





Grupa: Zarejestrowani
Postów: 4
Pomógł: 0
Dołączył: 9.05.2012

Ostrzeżenie: (0%)
-----

dość proste i skuteczne rozwiązanie:

[HTML] pobierz, plaintext 
  1. <!DOCTYPE>
  2. <html>
  3. <head>
  4. <style>
  5. #div{
  6. 	width:300px; 
  7. 	height:400px;
  8. 	background:blue;
  9. 	display: table-cell;
  10. 	vertical-align: middle;
  11. }
  12. #center{
  13. 	height:50px;
  14. 	width:200px;
  15. 	margin:0 auto;
  16. 	background:red;
  17. }
  18. </style>
  19. </head>
  20.  
  21. <body>
  22.  
  23. <div id="div">
  24. 	<div id="center">
  25. 		wycentrowany wertykalnie div
  26. 	</div>
  27. </div>
  28.  
  29. </body>
  30. </html>
[HTML] pobierz, plaintext


Ten post edytował adrianbienias.pl 10.05.2012, 22:36:35
Go to the top of the page
+Quote Post
« Następny starszy · CSS · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 22.08.2025 - 22:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn