[css]wyśrodkowanie img Opcje

[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

[!*!]

[CSS] pobierz, plaintext 
margin:0 auto
[CSS] pobierz, plaintext 

[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?(IMG:style_emoticons/default/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.


Ten post edytował maniek74 28.05.2014, 17:48:33

[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/

Ten post edytował Damonsson 28.05.2014, 18:23:56

[!*!]

Cholera, odruchowo skasowałem posta (IMG:style_emoticons/default/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/