Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [CSS]wycentrowanie obrazka w divie
Forum PHP.pl > Forum > Przedszkole
jacobson
Witam, mam problem z wycentrowaniem obrazka w divie. Robie galerie i wyswietlam w niej thumbnaile (generowane odpowiednie rozmiary w zaleznosci od rozmiarow obrazka). I teraz mam tak :
  1. <div id="gallery">
  2. <?php
  3. foreach ($gallery_images as $item) {
  4. if ($item['cathegory'] == $this->uri->segment(2)) {
  5. ?>
  6. <div class="image_box"><a href="<?php echo $item['url'] ?>" ><img src="<?php echo $item['thumb_url']; ?>" /></a></div>
  7. <?php
  8. }
  9. }
  10. ?>
  11. </div>


gallery to jest nadrzedny ktory utrzymuje cala galerie, nastepnie mam boxa "image_box" o ustalonych rozmiarach 200px x 200px. I wewnatrz tego boxa mam zdjecie ktore wlasnie chce wycentrowac

  1. #gallery{
  2. clear:left;
  3. float:left;
  4. margin: 50px 0 0 0;
  5. width: 935px;
  6. background: #f7f7f7;
  7. border: 1px solid #cccccc;
  8. }
  9. #gallery img{
  10. float:left;
  11. margin: 0 auto; (to nie dziala - probowalem text-align:center - tez nie dzialalo)
  12. }
  13. .image_box{
  14. float:left;
  15. width: 200px;
  16. height: 200px;
  17. margin: 20px 20px;
  18. }


Czy ktos moze moglby cos podpowiedziec ? Oczywiscie moge probowac na "sztywno" centrowac obrazki ale problem pojawia sie wlasnie kiedy thumbnaile maja rozne rozmiary (jeden kwadrat inny w pionie prostokat, inny w poziomie). W takich wypadkach te obrazki dalej sie rozjezdzaja ...

Z gory dzieki za pomoc,
pozdrawiam
vokiel
Float wyjmuje obiekt z obiegu w dokumencie, zatem margines wtedy nie zadziała, bo obiekt tak jakby się unosi ponad sceną.
Jeśli chcesz obiekty obok siebie, to nadaj im inny display, porzuć float.
jacobson
no ok, odnoszac sie do tego co napisales, zmienilem plik css jednak ciagle nic

  1. #gallery{
  2. margin: 50px 0 0 0;
  3. width: 935px;
  4. background: #f7f7f7;
  5. border: 1px solid #cccccc;
  6. }
  7. .image_box{
  8. width: 200px;
  9. height: 200px;
  10. margin: 20px 20px;
  11. display: inline-block;
  12. }
  13. .image_box img{
  14. margin: 0 auto;
  15. }


nawet udalo mi sie przy img src ustalic w stylu wysokosc i szerokosc obrazka (getimagesize()) - bardzo obciazajace tongue.gif
i nawet to ze mam jego wymiary ustalone na "sztywno w stylu" nic mi nie daly :/
vokiel
Daj to gdzieś na żywo
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.