Forum PHP.pl > [HTML][CSS]Obrazek na środku DIV

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [HTML][CSS]Obrazek na środku DIV

Macok

9.09.2008, 22:38:58

[HTML] pobierz, plaintext 
<body xml:lang="pl">
<div class="footer">
<img src="images/obrazek.png"/>
</div>
</body>
</html>
[HTML] pobierz, plaintext

Styl:

[HTML] pobierz, plaintext 
div.footer{
width: 800px;
margin: 0 auto;
background: black;
padding: 7px;
text-align: left;
}
 
.footer img{
}
[HTML] pobierz, plaintext

Moim zdaniem obrazek powinien znajdować się dokładnie po środku DIV'a, ale dolny odstęp jest odrobinę większy.
Dlaczego?

matssuda

10.09.2008, 07:26:44

nie, w tym momencie środkujesz div.footer, a img schodzi na lewo bo masz

[HTML] pobierz, plaintext 
text-align: left;
[HTML] pobierz, plaintext

Zrób tak:

[HTML] pobierz, plaintext 
div.footer{
width: 800px;
margin: 0 auto;
background: black;
padding: 7px;
}
 
.footer img{
display: block;
margin: 0 auto;
}
[HTML] pobierz, plaintext

Lub

[HTML] pobierz, plaintext 
div.footer{
  width: 800px;
  margin: 0 auto;
  background: black;
  padding: 7px;
text-align: center;
  }
[HTML] pobierz, plaintext

ferrero2

10.09.2008, 07:28:50

Zależy w któej przeglądarce sprawdzasz.
Jeśli jest to IE 6.0 to możliwe że nie wprowadziłeś jej w zgodność z XHTML czy HTML 4.0 za pomocą deklaracji DTD a on inaczej widzi elementy blokowe niż FF czy Opera.
Jeżeli taka sytuacja występuje na różnych przeglądarkach. To winą będzie padding - ustaw go na 0 i zwiększaj po jeden - wtedy sprawdzaj jak się przesuwa ( nie mam możliwości teraz sprawdzić tego u siebie więc tylko sugeruję).

Może pomoże, a jak nie pomoże to może morze pomoże

Pozdrawiam

wookieb

10.09.2008, 07:38:03

Nie tylko padding ale tez

Kod

line-height: 0px;

dla tego diva.

Pierwsze rozwiazanie matssuda tez jest dobre

O ile autor tematu chce rezygnowac z liniowego trybu wyswietlania obrazka

Macok

10.09.2008, 14:58:14

Dzięki za pomoc pomogło ustawienie line-height na 0.

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.