GoldenLine
Zaloguj się
Tomasz Krzak

Tomasz Krzak spragniony zmian

Temat: Wyrównanie obrazu w pionie w div

Witam,
Mam problem z wyrównaniem obrazu w divie. Otóż jest div, któremu narzuciłem maksymalną wysokość (max-height), a w środku obraz, który jest wyższy od zadanej wysokości diva. Obraz jest wyrównywany do górnej krawędzi, a potrzebuję: jeżeli obrazek będzie wyższy niż zadana wysokość diva, obrazek zostanie wycentrowany w pionie.
Poniżej kod żywcem ze strony przeklejony:



<div class="itemImageBlock">

     <span class="itemImage">

          <a class="modal" rel="{handler: 'image'}" href="/nszz/media/k2/items/cache/5fecdb2bc69575551c549848d9a76974_XL.jpg" title="Kliknij, by podejrzeć ilustrację">

               <img src="/nszz/media/k2/items/cache/5fecdb2bc69575551c549848d9a76974_L.jpg" alt="To nie jest kraj dla starych ludzi" style="width:713px; height:auto;"/>

          </a>

     </span>

</div>


Dodam, że wyrównywanie elementu 'span.itemImage img' przy pomocy vertical-align: middle nie przynosi żadnego efektu.
Link do wypowiedziLink
Ireneusz Adamczyk

Ireneusz Adamczyk Pomagamy Firmom
budować przewagę
konkurencyjną

Temat: Wyrównanie obrazu w pionie w div

Temat jest kłopotliwy ze względu na działanie tylko inline.

Tutaj są pomysły, jak to zrobić:

http://www.mblog.boo.pl/artykul-286-css-vertical-align...

http://www.goldenline.pl/ramka/aHR0cDovL3d3dy5jaGFsYXB...

Pozdrawiam
Link do wypowiedziLink
Mateusz Komarnicki

Mateusz Komarnicki

Temat: Wyrównanie obrazu w pionie w div

Temat jest banalny a nie kłopotliwy. Zobacz przykład z mojej strony -> http://slick.pl/blog/. Napis "My blog - read or leave" jest wycentrowany w pionie.

Robisz jakiś kontener i nadajesz mu właściwości display table oraz definiujesz wysokość. Następnie w nim kolejny element np. p o właściwościach display table-cell oraz vertical-align middle.

U mnie to div.headerTextHolder a w nim h1.



.headerTextHolder {

  color: #FFFFFF;

  display: table;

  height: 280px;

  position: relative;

  width: 80%;

}



.headerTextHolder h1 {

  display: table-cell;

  font-size: 46px;

  font-weight: bold;

  letter-spacing: -3px;

  line-height: 46px;

  margin: 0;

  vertical-align: middle;

}
Link do wypowiedziLink
Grzegorz Wysocki

Grzegorz Wysocki Mam web do pewnych
spraw ;)

Temat: Wyrównanie obrazu w pionie w div

Table, talbe-cell się "wyleje" przy overflow. Zresztą nie wiem jak to miałoby pomóc Tomkowi. Moim zdaniem jeśli nie znamy wysokości obrazka to najłatwiej będzie to rozwiązać odrobiną js'a. Chyba, że konieczne rozwiązanie css'owe jest.Ten post został edytowany przez Autora dnia 07.10.13 o godzinie 00:14
Link do wypowiedziLink
Marcin Gościcki

Marcin Gościcki Front-end
webdeveloper

Temat: Wyrównanie obrazu w pionie w div

Rozwiązanie jest dość proste - http://jsfiddle.net/JpZYS/2/ - ale jest problem. Przy takim rozwiązaniu kontener w którym znajduje się img musi posiadać ustaloną wysokość, a więc wymaga height. a nie tak jak jest w Twoim przypadku min-height.

Odrębną sprawą jest wsparcie przeglądarek dla tego rozwiązania. Ze względu na zastosowanie CSS3 w tym przypadku rozwiązanie zadziała od IE9 w górę - http://caniuse.com/transforms2d

EDIT: Poprawiony URLTen post został edytowany przez Autora dnia 07.10.13 o godzinie 10:12
Link do wypowiedziLink
Tomasz Krzak

Tomasz Krzak spragniony zmian

Temat: Wyrównanie obrazu w pionie w div

Właśnie dlatego napisałem z prośbą o pomoc. Wiem, że problem leży w braku zdefiniowanej wysokości obrazka. Gdyby wszystkie obrazki były jednakowej wysokości to nie byłoby problemu: można by zdefiniować wysokość diva, a przez to w nim wyrównać obraz w pionie, w chyba najprostszy sposób:


img {margin-top: -polowa_wysokości_obrazka_w_px; top: 50%}

Problem właśnie w tym, że każdy obraz może być innej wysokości, a niektóre nawet mniejsze niż oczekiwana (stąd parametr max-height) - szerokość obrazu jest ustalona na stałe i w zależności od proporcji taką wysokość przyjmuje.
Wydaje mi się, że w samym cssie tego nie okiełznam, będę musiał poszukać jakiegoś rozwiązania w js. Dziękuję wszystkim za zainteresowanie (gdyby ktoś znalazł rozwiązanie to proszę o podzielenie się nim).Ten post został edytowany przez Autora dnia 07.10.13 o godzinie 12:50
Link do wypowiedziLink
Mateusz Komarnicki

Mateusz Komarnicki

Temat: Wyrównanie obrazu w pionie w div

Grzegorz W.:
Table, talbe-cell się "wyleje" przy overflow. Zresztą nie wiem jak to miałoby pomóc Tomkowi. Moim zdaniem jeśli nie znamy wysokości obrazka to najłatwiej będzie to rozwiązać odrobiną js'a. Chyba, że konieczne rozwiązanie css'owe jest.

Hej Grzegorz. Nie bardzo jestem w stanie zrozumieć Twoją wypowiedź.

Overflow nie ma nic do tego jaki display wymuszasz na obiekcie. Jeśli coś Ci się "wylewa" (cokolwiek to znaczy) to znaczy, że niepoprawnie coś zdefiniowałeś w arkuszu. Jak by to miało pomóc Tomkowi? Ano tak, że jeśli zrobi tak jak powiedziałem (można także inaczej) to będzie miał wyrównanie w pionie - czyli generalnie rozwiąże swój problem. ;-)

Fakt, nie dopowiedziałem, że parent (kontener, w którym ma być element, który chcemy wyśrodkować w pionie) musi mieć podaną wysokość. Jeśli się ją zna to ok a jeśli nie to owszem JS. Czy ktoś tu wspominał, że rozwiązanie musi być "no JS"?

O supporcie starych przeglądarek już się nie wypowiadam gdyż to temat rzeka. Osobiście przestałem wspierać w swoich projektach IE mniejsze niż 9.

Pozdrawiam,
Mateusz :-)

edit:

tak Tomek, bez JS nie okiełznasz.
Badaj wysokość elementów przez np.

var aboveHeight = jQuery('div#mainHeader').outerHeight();

i wstawiaj przez .css(height, aboveHeight);

To przykład.Ten post został edytowany przez Autora dnia 07.10.13 o godzinie 12:54
Link do wypowiedziLink
Grzegorz Wysocki

Grzegorz Wysocki Mam web do pewnych
spraw ;)

Temat: Wyrównanie obrazu w pionie w div

Hej Grzegorz. Nie bardzo jestem w stanie zrozumieć Twoją wypowiedź.

Chodziło mi o to, że overflow: hidden (który jest tu potrzebny do przycięcia zdjęcia większego niż okalający go div) nie zadziała z table-cell ani z table. Jest to fakt wynikający ze specyfikacji i jeżeli wrzucisz cokolwiek większego od wysokości diva z takim display, to nawet jak dasz overflow:hidden to i tak taki div dopasuje swoją wysokość do zawartych w sobie elementów. Można to obejść (dodatkowe wrappery, fixed table layout), ale moim zdaniem nakład pracy jest niewspółmierny do efektów.

Nie mówię, że Twoje rozwiązanie jest złe do wyrównywania, ale zaznaczyłem, ze w tym przypadku i w takiej formie się nie sprawdzi, bo z pytania wprost wynikało, że nie znamy wysokości zdjęcia (raz jest mniejsze, a raz większe). Ot wsio :)Ten post został edytowany przez Autora dnia 07.10.13 o godzinie 14:40
Link do wypowiedziLink
Mateusz Komarnicki

Mateusz Komarnicki

Temat: Wyrównanie obrazu w pionie w div

Wynika z tego, że to co chcemy wycentrować w pionie jest wyższe niż to w czym jest zawarte. W takim razie nie widzę sensu centrowania w pionie w ogóle.

Chyba, że w takim razie można paradoksalnie wycentrować rodzica w dziecku (w zdjęciu) obu zdefiniować position i dla zdjęcia z-index 2 a dla rodzica 1 aby poszło za zdjęcie...

Może już filozofuje ale tak mi wpadło do głowy. :-)
Link do wypowiedziLink
Tomasz Krzak

Tomasz Krzak spragniony zmian

Temat: Wyrównanie obrazu w pionie w div

No tak - to co chcemy wycentrować jest wyższe niż to, w czym jest zawarte. Jeżeli zdjęcie jest wyższe niż 400px (div.itemImageBlock {max-height: 400px}) to chcemy zdjęcie wycentrować, jeżeli mniejsze, to div dopasuje się do obrazu i tutaj centrowania nie będzie. Tak to powinno wyglądać.

Dzięki Mateuszu za pomoc z javascriptem - z pewnością spróbuję to wykorzystać.Ten post został edytowany przez Autora dnia 07.10.13 o godzinie 15:07
Link do wypowiedziLink
Grzegorz Wysocki

Grzegorz Wysocki Mam web do pewnych
spraw ;)

Temat: Wyrównanie obrazu w pionie w div

Chyba, że w takim razie można paradoksalnie wycentrować rodzica w dziecku (w zdjęciu) obu zdefiniować position i dla zdjęcia z-index 2 a dla rodzica 1 aby poszło za zdjęcie...

Może już filozofuje ale tak mi wpadło do głowy. :-)

Ciekawa opcja, ale nie chce mi się dłubać :)
Ja przez chwilę jeszcze myślałem, żeby ustawiać te img jako background dla tego diva ale jakoś rozwiązania inline do mnie nie przemawiają.Ten post został edytowany przez Autora dnia 07.10.13 o godzinie 15:36
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Konwerter tabelek do div ...




Wyślij zaproszenie do
Anuluj