Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Centrowanie dwóch rzędów divów
Forum PHP.pl > Forum > Po stronie przeglądarki > CSS
SpiderPL
3.02.2009, 20:07:37
Mam problem z wycentrowaniem divów. Mam dwa rzędy divów i nie jestem w stanie przewidzieć ile ich będzie, czy będzie ich 10, czy może 7 albo 8, albo może tylko 1 albo 3. Chciałbym je wycentrować tak, aby wyglądało to jak na rysunku nr 2, a wychodzi mi jak na rysunku nr 1. Próbowałem już umieszczać je w <div style="text-align:center"> ale to nic nie pomaga. Każdy z divów ma parametr float:left. Męczę się z tym już bardzo długo, szukałem w Googlach ale nic nie znalazłem.

Lion_87
3.02.2009, 20:16:55
Może spróbuj każdy rząd DIVow zamykać w DIVie ze stylem margin:0px auto;
deeper
4.02.2009, 18:01:22
Moze w ten sposob:
[HTML] pobierz, plaintext 
  1. <div style="text-align: center;">
  2.   <div style="display: inline; width: 100px; height: 100px;"> </div>
  3.   <div style="display: inline; width: 100px; height: 100px;"> </div>
  4.   <div style="display: inline; width: 100px; height: 100px;"> </div>
  5.   <div style="display: inline; width: 100px; height: 100px;"> </div>
  6.   <div style="display: inline; width: 100px; height: 100px;"> </div>
  7.   <div style="display: inline; width: 100px; height: 100px;"> </div>
  8.   <div style="display: inline; width: 100px; height: 100px;"> </div>
  9. </div>
[HTML] pobierz, plaintext


Powinno zadzilac.
Niezaleznie od ilosci beda sie ladnie centrowaly jak trzeba
SpiderPL
4.02.2009, 20:25:02
Wielkie dzięki! O to mi właśnie chodziło! Brakowało "display: inline". Bałem się, że to coś gorszego i że wewnątrz tych divów, które miały być centrowane coś nie gra.
Klikam "Pomógł" i raz jeszcze wielkie dzięki!

Hmm... Działa to w IE, ale Firefox wyświetla mi puste pola. Zerknij na to pod Firefoxem:

[HTML] pobierz, plaintext 
  1. <html>
  2. <head></head>
  3. <body>
  4. <div style="width: 500px; text-align: center">
  5.    <div style="display: inline; width: 120px; height: 90px; background: url(http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg) no-repeat; background-position: center center; margin: 3px"></div>
  6.    <div style="display: inline; width: 120px; height: 90px; background: url(http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg) no-repeat; background-position: center center; margin: 3px"></div>
  7.    <div style="display: inline; width: 120px; height: 90px; background: url(http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg) no-repeat; background-position: center center; margin: 3px"></div>
  8.    <div style="display: inline; width: 120px; height: 90px; background: url(http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg) no-repeat; background-position: center center; margin: 3px"></div>
  9.    <div style="display: inline; width: 120px; height: 90px; background: url(http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg) no-repeat; background-position: center center; margin: 3px"></div>
  10. </div>
  11. </body></html>
[HTML] pobierz, plaintext


Bez "display: inline" było dobrze i pod IE i pod Firefoxem, tylko że się nie centrowało.
deeper
5.02.2009, 11:47:53
Hmm, no tak wyswietla inline.
ale:
[HTML] pobierz, plaintext 
  1. <div style="width:800px; height: 500px; text-align: center;">
  2.   <div style=" margin: 10px; display: inline; ">
  3.     <img src="http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg" alt="">
  4.   </div>
  5.   <div style=" margin: 10px; display: inline; ">
  6.     <img src="http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg" alt="">
  7.   </div>
  8.   <div style=" margin: 10px; display: inline; ">
  9.     <img src="http://i0006.photobucket.com/albums/0006/pbhomepage/Pink%20Panther/th_plainfilmstripcopy-1.jpg" alt="">
  10.   </div>
  11. </div>
[HTML] pobierz, plaintext


To dziala. Ale nie zawsze sie chce img miec w srodku.

Z tego co widzialem to juz wiele osob mialo problemy z takimi ustawieniami... i pytaja po forach.
Jak cos wymysle to dam znac
SpiderPL
5.02.2009, 22:11:50
Właśnie na tym problem polega, że chciałem wewnątrz tych divów umieścić zdjęcia, żeby były w ten sposób wykadrowane. Poradzę sobie z tym w inny sposób, bo po prostu przytnę je odpowiednio w PHP przez GD Library, ale nie daje mi spokoju fakt, że nie wiem jak to zrobić inaczej, po prostu w CSS, bo jeśli zechcę załadować to przycięte w CSS zdjęcie na tej samej stronie, jeszcze w innym miejscu, ale tym razem już bez przycięcia, to będę musiał załadować dwa obrazki, zamiast tylko jednego. Tak czy inaczej pomogłeś mi, bo podane przez Ciebie ustawienie divów działa. Jak coś wymyślisz to napisz, bo może ktoś z tego jeszcze skorzysta.
deeper
6.02.2009, 14:27:03
Chcesz wykadrowac zdjecie ?

Sprawdz:
http://www.w3schools.com/CSS/pr_pos_clip.asp

Swoja droga trzeba pamietac ze ladujesz cale zdjecie, co wplywa na wage strony i czas ladowania. Jak jest wiecej zdjec to ma znaczenie.
Ja bym tworzyl miniatury. No ale jak tam kto uwaza.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.