Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML][CSS] wyśrodkowanie zdjęcia w div
Forum PHP.pl > Forum > Przedszkole
krzychu0808
Witam....
chciałem wyśrodkować zdjęcie w div zrobiłem tak:
CSS:
  1. div.zdjeciecenter{
  2. text-align: center;
  3. }
  4. .zdjeciecenter {
  5. width : 200px;
  6. }



  1. <?php
  2. echo "<div class=\"zdjeciecenter\"><img src=\"../james/zdjecia/$row_zdjecie[mini]\"></div>";
  3. ?>
ferrero2
aby wycentrować zdjęcie w elemencie blokowym musisz dodać to :
Kod
margin:0 auto;


To taka odpowiedź na szybko - ale ogólnie to Twój pierwszy kod CSS jest zupełnie źle skonstruowany.
Poczytaj sobie świetny kurs na temat elementów blokowych

http://gajdaw.pl/html/

od punktu 11 do 13 będziesz miał wszystko doskonale wyjaśnione...

Pozdrawiam
Spyder
Cytat(ferrero2 @ 11.08.2008, 18:23:24 ) *
aby wycentrować zdjęcie w elemencie blokowym musisz dodać to :
Kod
margin:0 auto;


To taka odpowiedź na szybko - ale ogólnie to Twój pierwszy kod CSS jest zupełnie źle skonstruowany.
Poczytaj sobie świetny kurs na temat elementów blokowych

http://gajdaw.pl/html/

od punktu 11 do 13 będziesz miał wszystko doskonale wyjaśnione...

Pozdrawiam


To co napisal ferreo2 jest dobre ale nie do konica bo margin:0 auto zadziala tylko wtedy jak podasz szerokosc czyli np wstaw w zdjecie classe np <img src="moje-photo.jpg" class="photo" />

no i w style.

<style>
.photo { width: 150px; margin:0 auto }
</style>

Teraz to powinno zadzialac winksmiley.jpg
ferrero2
Środkowanie poprzez margin:0 auto; odbywa się wtedy kiedy element, wewnątrz którego środkujemy posiada określoną szerokość(np kontener).
Jeśli chodzi o sam element to szerokość jest wymagana dla "pewnej" przeglądarki. Ale dla świętego spokoju rzeczywiście można ją podać.

Pozdrawiam
Mariusz
rozbik
Mi ta metoda nie pomaga. Nigdy mi tak nie działało i robię tak że obrazek umieszczam w DIV-ie i centruję tego DIV-a względem DIV-a nadrzędnego poprzez nadanie mu stylu margin:0 auto
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.