Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [css]wyśrodkowanie img
Forum PHP.pl > Forum > Przedszkole
maniek74
Witam

Chyab pytanie banalne mam banner o szerokości np 2000 px a rozdzielczość np 1024, jak zrobić aby banner się przycinał po równo po prawej i lewej, tak jak background-position: center;

Pozdrawiam
!*!
  1. margin:0 auto
maniek74
no właśnie nie działa
!*!
A nadałeś display:block dla img?
maniek74
tak

<div style="margin:0 auto"><a href="{DOMAIN_ALL}/oferta"><img style="display: block;" src="{DOMAIN_ALL}/_portal/userFile/sgh/banner/baner1.png" /></a></div>

i jest ucinany tylko po prawej zamiast po równo;
!*!
Zdecyduj się co chcesz wyśrodkować, czy div czy img.
maniek74
próbowałem:

<div style="margin: 0 auto; display: block;"><a href="{DOMAIN_ALL}/oferta"><img src="{DOMAIN_ALL}/_portal/userFile/sgh/banner/baner1.png" /></a></div>

<div><a href="{DOMAIN_ALL}/oferta"><img style="margin: 0 auto; display: block;" src="{DOMAIN_ALL}/_portal/userFile/sgh/banner/baner1.png" /></a></div>

teź nie srodkuje
!*!
http://jsfiddle.net/tfjA8/
maniek74
sorki ale czy przczytałeś pierwszy post?questionmark.gif?
grafikę mam większą niż rozdzielcość i chce żeby ją przyciąć po równo po obu stronach

ścieżka do przykładowego bannera:
http://sgh.poznan.pl/_portal/userFile/sgh/banner/baner1.png


dzięki serdeczne kurde nie podawałem rozmiaru bannera.
Damonsson
na <img /> tego nie zrobisz z założeń HTMLa.

1. Możesz to zrobić za pomocą przykładowo DIVa i w nim background i background-position.

2. Albo dać kontener z konkretnym wymiarem przykładowo DIVa z text-align: center i w nim <img /> - tego raczej nie zrobisz zbyt prosto dodając samo text-align: center, więc sobie daruj. Zrobiłem Ci dla 2. dwa przykłady:

Tu masz z użyciem <img /> jeśli nie znasz wymiarów kontenera/rozdzielczości (musisz użyć JS):
http://jsfiddle.net/4eYX9/348/

A tu masz z użyciem <img /> jeśli znasz wymiary kontenera/rozdzielczości (sam CSS):
http://jsfiddle.net/4eYX9/349/
!*!
Cholera, odruchowo skasowałem posta biggrin.gif
Weź poprawkę na to że w poprzednim przykładzie tworzysz przestrzeń po prawej mimo to że środkujesz IMG.

Najlepiej byłoby to zrobić za pomocą JS.
trueblue
Jeśli nie znamy wymiarów obrazka:
http://jsfiddle.net/ybfXC/
Jeśli znamy wymiary obrazka, bez calc():
http://jsfiddle.net/tdnd6/
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.