Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
Reply to this topicStart new topic
> [CSS] Jak wypośrodkować zdjecie w divie?, Opcja margin : auto nie działa.
ed3k
post 24.09.2008, 21:34:45
Post #1





Grupa: Zarejestrowani
Postów: 61
Pomógł: 0
Dołączył: 30.03.2008

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


Piszę galerię w AJAXie. Nie mogę ustawić centralnego zdjęcia (w divie id="fota"). Chciałbym aby było ono wyśrodkowane w tym divie. Opcja margin : auto nie działa. Macie jakieś pomysły?
  1. <div id="fota_tlo">
  2. <div id="fota_tloInside">
  3. <div id="fota">
  4. <img class="theOne" src="images/ZdjeciaPlacowki/{$arrGaleria[$obraz]}" onclick="exit();" title="Zamknij." />
  5. </div>
  6. <div id="previous_pudelkoIkona">
  7. <img src="images/ZdjeciaPlacowki/{$arrGaleria[$obraz-1]}" onclick="pobierzFoto('{$arrGaleria[$obraz-1]}');" class="icon" title="Poprzednie."/>
  8. </div>
  9. <div id="next_pudelkoIkona" align="right">
  10. <img src="images/ZdjeciaPlacowki/{$arrGaleria[$obraz+1]}" onclick="pobierzFoto('{$arrGaleria[$obraz+1]}');" class="icon" title="Kolejne."/>
  11. </div>
  12. </div>
  13. </div>

  1. #fota_tlo {
  2. background : url('../images/tlo_galeria.png');
  3. width : 100%;
  4. height : 100%;
  5. position : fixed;
  6. top : 0;
  7. left : 0;
  8. }
  9.  
  10.  
  11. #fota_tloInside {
  12. background : transparent;
  13. width : 40%;
  14. height : 100%;
  15. margin : 2% auto;
  16. }
  17.  
  18.  
  19. #fota {
  20. background : transparent;
  21. outline : #000000 solid 0px;
  22. height : 75%;
  23. width : 100%;
  24. }
  25.  
  26. img.theOne {
  27. border : #000000 solid 5px;
  28. max-height : 100%;
  29. max-width : 100%;
  30. }
  31.  
  32.  
  33. img.icon {
  34. margin : 10px;
  35. width : 150px;
  36. }
  37.  
  38.  
  39. img.icon:hover {
  40. width : 170px;
  41. margin : auto 0px;
  42. }
  43.  
  44.  
  45. #next_pudelkoIkona {
  46. float : left;
  47. width : 50%;
  48. background : transparent;
  49. position : relative;
  50. right : -50px;
  51. }
  52.  
  53.  
  54. #previous_pudelkoIkona {
  55. float : left;
  56. width : 50%;
  57. background : transparent;
  58. position : relative;
  59. right : 50px;
  60. }
Go to the top of the page
+Quote Post
piachu
post 24.09.2008, 21:50:00
Post #2





Grupa: Zarejestrowani
Postów: 28
Pomógł: 1
Dołączył: 12.01.2004
Skąd: Edinburgh

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


Probowales "text-align: center;"?
Go to the top of the page
+Quote Post
robos85
post 24.09.2008, 22:00:18
Post #3





Grupa: Zarejestrowani
Postów: 466
Pomógł: 11
Dołączył: 21.09.2006
Skąd: Szczecin

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


margin: 0 auto; - to ci cały div wypośrodkuje,
text-align:center; - powinno pomóc
Go to the top of the page
+Quote Post
lukas_xplowd
post 7.01.2009, 22:12:43
Post #4





Grupa: Zarejestrowani
Postów: 22
Pomógł: 0
Dołączył: 16.10.2008

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


Cytat(robos85 @ 24.09.2008, 22:00:18 ) *
margin: 0 auto; - to ci cały div wypośrodkuje,
text-align:center; - powinno pomóc


Mam podobny problem.
Chcę wypośrodkować zdjęcie wewnątrz diva i ani margin ani text-align nie pomaga :/
Jakieś sugestie?
Go to the top of the page
+Quote Post
zulus
post 7.01.2009, 23:48:42
Post #5





Grupa: Zarejestrowani
Postów: 225
Pomógł: 18
Dołączył: 30.06.2003
Skąd: Wrocław

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


Hmmm musiałbyś dać przykład. Jeżeli np chcesz wypośrodkować małe zdjęcia (wymiary diva są mniej więcej znane) to możesz dać to zdjęcie jako tło div'a i dla niego

background-position: center center;

Ja tak robię dla miniaturek.

Inne metody to np.
1. Centrowanie tylko w poziomie (stała szerokość diva)

  1. div.z_fota img {
  2. display:block;
  3. margin: 0 auto;
  4. }


2. Cetrowanie w pionie w przy stałej szerokości:

  1. div.z_fota {
  2. height: 300px;
  3. line-height: 300px;
  4. }
  5. div.z_fota img {
  6. vertical-align: middle;
  7. }


Po za tym można się bawić z display: table-row i wtedy vertical-align: middle, ale jak dla mnie zbyt dużo kombinowania w IE tongue.gif

Ten post edytował Ociu 8.01.2009, 07:49:17
Powód edycji: Poprawiłem BBCode (ociu)


--------------------
Go to the top of the page
+Quote Post
lukas_xplowd
post 8.01.2009, 00:39:33
Post #6





Grupa: Zarejestrowani
Postów: 22
Pomógł: 0
Dołączył: 16.10.2008

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


Dzięki Zulus
Go to the top of the page
+Quote Post

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

 



RSS Wersja Lo-Fi Aktualny czas: 1.05.2025 - 06:15