Wyśrodkowanie obrazka w pionie i poziomie w bloku DIV

Wszystko o HTML, XHTML, XML, CSS.
juli126
Posty: 12
Rejestracja: 24 cze 2011, 12:08:26
Płeć: Niewybrana
User Agent: Firefox Windows 1366x768

Wyśrodkowanie obrazka w pionie i poziomie w bloku DIV

Post autor: juli126 »

Witam,
wie ktoś jak wyśrodkować obrazek w pionie i poziomie, który się znajduje w divie ??
Mam obrazki umieszczone w divach i chce je wyśrodkować w pionie i poziomie.
LaY
Posty: 1120
Rejestracja: 28 sty 2009, 15:20:07
Lokalizacja: Silesia
Płeć: Mężczyzna
User Agent: Opera Windows 1920x1080
Kontakt:

Re: Wyśrodkowanie obrazka w pionie i poziomie w bloku DIV

Post autor: LaY »

- margin:auto dla obrazka, może pomóc ale nie musi
- vertical-align:middle dla obrazka na wyśrodkowanie w pionie(ale to chyba dla obrazków nie zadziała)
- text-align:center dla div'aw celu wyśrodkowania zawartości w poziomie, zadziała na bank

---- EDIT ----

Możesz też pozycjonować div'a relatywnie a obrazek absolutnie

Kod: Zaznacz cały

img{
position:absolute;
top:50%;
left:50%;
margin-top: -1/2H;
margin-left: -1/2W;
}
 
ten kod akurat jest z jednego z for, na te marginesy sam bym nie wpadł :P
Niě nerwuj hanysa
juli126
Posty: 12
Rejestracja: 24 cze 2011, 12:08:26
Płeć: Niewybrana
User Agent: Firefox Windows 1366x768

Re: Wyśrodkowanie obrazka w pionie i poziomie w bloku DIV

Post autor: juli126 »

dzięki za pomoc, ale poradziłem sobie z tym na tabelkach :)
pitrus1991
Posty: 1
Rejestracja: 24 paź 2015, 19:59:59
Płeć: Niewybrana
User Agent: Firefox Windows 1680x1050

Wyśrodkowanie obrazka w pionie i poziomie w bloku DIV

Post autor: pitrus1991 »

Można to zrobić w prostszy sposób, temat z 2011 roku, ale myślę, że pomogę innym. Zapewne większość w czytuje obrazki za pomocą znacznika <img src="sciezka">, istnieje inny sposób który zaoszczędzi niepotrzebnych nerwów. Najlepiej na stronie dodać tylko

Kod: Zaznacz cały

 <div class="nazwa_klasy"> </div>


A w CSS

Kod: Zaznacz cały

.nazwa_klasy
{
	width: 500px;
	height: 500px;
	background: url('sciezka_do_obrazka') no-repeat;
	background-position: center;
	background-size: 200px auto; // opcjonalnie (pierwsza wartość to wysokość, druga to szerokość)
}
katia77
Posty: 3
Rejestracja: 08 lis 2016, 09:04:07
Płeć: Niewybrana
User Agent: Chrome Windows 1680x1050

Wyśrodkowanie obrazka w pionie i poziomie w bloku DIV

Post autor: katia77 »

:mrgreen:
ODPOWIEDZ