[css] img in div wil maar niet verticaal uitlijnen

[Wiethoofd]

Ik heb nu een stuk php wat afbeeldingen uit een map trekt, in maximaal 3 afbeeldingen per rij neerzet en de omliggende div per rij een hoogte meegeeft welke de maximale hoogte is van de grootste afbeelding op die rij. Tot zo ver geen problemen, waar het fout gaat is om de plaatjes verticaal in het midden uit te lijnen.

Geprobeerd:
margin: auto met een vaste hoogte van de .thumb de .thumb img een vertical-align geven

Ik zit hier nu al een flinke tijd mee te klooien en het is waarschijnlijk met 2 minuten werk op te lossen, maar ik heb het nodige geprobeerd en zie niet meer hoe het wel zou moeten werken...

Hieronder links de uitwerking van de huidige versie en rechts het gewenste resultaat wat hier geforceerd moest worden.

Uitwerking

Gewenste resultaat

Testcase: http://wiethoofd.info/got/speciaalwerk.html

Relevante ingekorte html en css:

Cascading Stylesheet:

.imgcontainer {
    overflow: hidden;
    margin-bottom: 5px;
}
.imgcontainer .thumb {
    text-align: center;
    float: left;
    width: 190px;
    height: 100%;
    vertical-align: middle;
}

HTML:

   <div class="imgcontainer" style="height: 153px">
    <div class="thumb"><img src="images/01.jpg" alt="" /></div>
    <div class="thumb"><img src="images/02.jpg" alt="" /></div>
    <div class="thumb"><img src="images/03.jpg" alt="" /></div>
   </div>
   <div class="imgcontainer" style="height: 126px">
    <div class="thumb"><img src="images/04.jpg" alt="" /></div>
   </div>

[bastv]

http://www.brunildo.org/test/img_center.html

[Wiethoofd]

Dat werkt dus niet. Aan de hand van http://www.brunildo.org/test/img_center2.html zou de .thumb een vaste breedte en hoogte mee moeten krijgen en wordt er gebruik gemaakt van een lege <span></span>

Een lege span maar ook de display: table-cell halen niets uit in bovenstaand geval..

[ Voor 8% gewijzigd door Wiethoofd op 11-10-2010 14:20 ]

[noes]

Je zou ook gewoon de divjes een bg kunnen geven (tenzij je een goede reden hebt dat je dat niet wil..), dan de post van bastv gebruiken of een javascriptje maken zoals: (onderstaande gebruikt de JQuery library).

code:

function valign(element){
    $(element).each(function(){ 
        var outerheight = $(this).parent('div').height();
        var innerheight = $(this).height();
        if (innerheight < outerheight){
            //margins toepassen zodat element in midden valt
            var margin = (outerheight - innerheight) / 2;
            $(this).css('margin-top', margin + 'px').css('margin-bottom', margin + 'px');
        } else {
            //binnenste element niet groter maken dan het maximale (buitenste element).
            $(this).css('height', outerheight);
        }
    });
}

Bovenstaande is ff snel in elkaar gezet en aan te roepen door valign($('.thumbs')); aan te roepen, aangenomen dat thumbs de klasse van de thumbnail is.

Succes en groet

[ Voor 0% gewijzigd door noes op 11-10-2010 14:22 . Reden: bugfix :+ ]

[Wiethoofd]

Een background is onmogelijk want er zijn ook versies met een clickable thumb, verder is niet elke afbeelding hetzelfde formaat. En het liefste maak ik geen gebruik van javascript als het serverside op te lossen is door de css of html aan te passen die nu uitgespuugd wordt.

[Salandur]

dit heeft waarschijnlijk met de align van het img element te maken. speel hier eens mee.

[Wiethoofd]

Daar ook mee zitten spelen, een vertical-align op de img zelf werkt ook niet.

[noes]

Wiethoofd schreef op maandag 11 oktober 2010 @ 14:25:
Een background is onmogelijk want er zijn ook versies met een clickable thumb, verder is niet elke afbeelding hetzelfde formaat. En het liefste maak ik geen gebruik van javascript als het serverside op te lossen is door de css of html aan te passen die nu uitgespuugd wordt.

Clickable thumb is toch ook JS? Dan trek je de url ipv uit het src attribuut gewoon uit de style/bg css:

code:

$(selector).css('background-image'); //jquery call om de bg-img uit een element in te lezen

En als je het helemaal backend wil oplossen, moet je de dimensies van je thumbnail uitlezen en de dimensies van je kader weten en dan plaatsen dmv margins (dus de JS call die ik in mn vorige post plaatste naar PHP/C#/VB/whatever porten).
Good luck!

[OkkE]

Door de .thumb een vaste hoogte te geven kun je door de line-heigt even veel pixels te maken als de height, alle minder hoge images centreren. Maar wanneer je ook de hoogte niet vast wil hebben, is het vrij lastig om dit cross-browser netjes (zonder JS) op te lossen, ben ik bang.

[crisp]

OkkE schreef op maandag 11 oktober 2010 @ 15:13:
Door de .thumb een vaste hoogte te geven kun je door de line-heigt even veel pixels te maken als de height, alle minder hoge images centreren. Maar wanneer je ook de hoogte niet vast wil hebben, is het vrij lastig om dit cross-browser netjes (zonder JS) op te lossen, ben ik bang.

Och, met een good-old table lukt dat wel hoor

[Ma.rkus.nl]

^ precies, dan kom je op een constructie waarbij je de hoogte van het plaatje linksonder moet uitlezen en dat moet toepassen op het plaatje rechtsonder.

Dit is typisch iets wat je niet met divs wil oplossen. Want wat je eigenlijk hebt hier is een <table> met vier cellen.

offtopic:
OMG HIJ ZEI TABLE!!

[8088]

Wiethoofd schreef op maandag 11 oktober 2010 @ 14:25:
Een background is onmogelijk want er zijn ook versies met een clickable thumb

Dan maak je de container toch clickable?

verder is niet elke afbeelding hetzelfde formaat.

Cascading Stylesheet:

background-position: center center;

Maar een table lijkt me inderdaad stukken eenvoudiger.

[moozzuzz]

Ergens in 2006 gefabriceerd:

Cascading Stylesheet:

/* ergens algemeen gedefinieerd */
img {border: 0; text-decoration: none;}
.c {text-align: center;}

/* ivm fotoboeken */
#content ul.fotoboekfoto   {list-style: none; margin: 0px; padding: 0px;}
#content li.fotoboekfoto   {display: inline; text-align: center; padding:0; margin: 0;}
#content li.fotoboekfoto a {border: 0px;}
#content li.fotoboekfoto img {border: 10px solid #ffffff; background-Color: #f9f9f9; vertical-align:middle;}

de b-parameter is overigens de locatie vd foto, dus doet eigenlijk niet terzake

HTML:

<ul class="fotoboekfoto">
   <li class="fotoboekfoto">
      <a href="" title="">
         <img alt="" src="./getfoto.php?b=xxx&w=120&h=150&thumb=1"></a>
   </li>

   <li class="fotoboekfoto">
      <a href="" title="">
         <img alt="" src="./getfoto.php?b=xxx&w=120&h=150&thumb=1"></a>
   </li>

   <li class="fotoboekfoto">
      <a href="" title="">
         <img alt="" src="./getfoto.php?b=xxx&w=120&h=150&thumb=1"></a>
   </li>

   ...etc
</ul>

Succes!

[ Voor 5% gewijzigd door moozzuzz op 11-10-2010 16:31 ]

[OkkE]

crisp schreef op maandag 11 oktober 2010 @ 15:17:
[...]

Och, met een good-old table lukt dat wel hoor

Eigenlijk zijn tabellen gewoon nog steeds het beste!

---

Het hangt een beetje van je ontwerp af, maar ik vind het zelf altijd netjes of elk item een vaste breedte + hoogte te geven en de images er binnen te centreren.

Testcase van TS omgebouwd: http://azwart.nl/tmp/1429518.html
_{Het kan nog netter, minder DIVs etc, maar daar ben ik nu te lui voor...}

@Wish; Oeps, mijn fout. Het was "html" ipv "htm"...

[ Voor 20% gewijzigd door OkkE op 11-10-2010 15:38 ]

[Wish]

OkkE schreef op maandag 11 oktober 2010 @ 15:27:
[...]

Testcase van TS omgebouwd: http://azwart.nl/tmp/1429518.htm

Eh...

Oeps! Deze link lijkt niet te werken -

[Wiethoofd]

Van de oude tables wil ik dus af Dit is schijnbaar een slecht voorbeeld geweest met de afbeeldingen, er zijn namelijk zeer veel verschillende formaten afbeeldingen, langer, tot 175px breed en is dus een vaste hoogte in de css van de container of .thumb opgeven niet mogelijk. De plaatjes allemaal moeten gaan wijzigen is ook een no-go.

De oplossing van OkkE zou inderdaad ideaal zijn mochten de afbeeldingen qua afmetingen allemaal in de buurt liggen, dit is echter niet het geval...

[moozzuzz]

@Okke, fyi: met mijn archaische (want browser van 't werk) IE6 krijg ik geen vertical align: middle, maar top.

@Wiethoofd: thumbs die erg van van grootte verschillen zijn misschien wel wat eigenaardig neen? Verder: divs gebruiken als ware het tabellen, schiet natuurlijk ook niets op én is niet wat we semantisch web noemen :-).

[Wiethoofd]

moozzuzz schreef op maandag 11 oktober 2010 @ 16:30:
@Okke, fyi: met mijn archaische (want browser van 't werk) IE6 krijg ik geen vertical align: middle, maar top.

IE7 werkt ie ook niet....

@Wiethoofd: thumbs die erg van van grootte verschillen zijn misschien wel wat eigenaardig neen? Verder: divs gebruiken als ware het tabellen, schiet natuurlijk ook niets op én is niet wat we semantisch web noemen :-)

Het is omzetten van de oude site naar een wat overzichtelijkere basis, maar ik zal eens knutselen of ik het in een tabel wel crossbrowser werkend krijg...

[moozzuzz]

Al mijn UL-versie geprobeerd? (werkt bij mij wel in IE6). Ik geloof dat het ligt aan de vertical-align: middle die enkel werkt op inline-elementen (maar dat is mijn vage achterhoofd dat me dit influistert -- te checken met de experts hier :^)

[Cartman!]

In dit geval is het toch ook enigszins tabulaire data? Dan zou ik niet perse het uit een tabel willen halen.

Je kunt ook je images door een script trekken die ze uitvult zodat ze in het midden komen te staan, zo krijgen je nieuwe thumbs allemaal dezelfde afmeting mee...

[Patriot]

Ik moet zeggen dat ik niet inzie hoe deze gegevens tabulair genoemd kunnen worden. Op het moment dat plaatsing van gegevens binnen tabel niets uitmaakt moet je al bij jezelf na gaan denken of je iets wel in een tabel wilt stoppen, dat is hier zeker het geval.

Het is gewoon een lijstje foto's waarvan de volgorde niet belangrijk lijkt te zijn, ik zou gewoon voor de oplossing van moozzuzz gaan.

[OkkE]

moozzuzz schreef op maandag 11 oktober 2010 @ 16:30:
@Okke, fyi: met mijn archaische (want browser van 't werk) IE6 krijg ik geen vertical align: middle, maar top.

I know. Ga me met zulke kleine dingen niet meer druk maken om IE6. Website is ook prima te gebruiken wanneer de images aan de bovenkant staan uitgelijnd.

@Wiethoofd: thumbs die erg van van grootte verschillen zijn misschien wel wat eigenaardig neen? Verder: divs gebruiken als ware het tabellen, schiet natuurlijk ook niets op én is niet wat we semantisch web noemen :-).

Agree. Als de thumbs te veel in grootte verschillen moet je daar misschien iets aan veranderen. Verder is opzich geen doodzonde om een tabel te gebruiken in dit geval; al zou ik dat zelf niet doen.

Wiethoofd schreef op maandag 11 oktober 2010 @ 16:34:
IE7 werkt ie ook niet....

Hmm, dacht dat het in IE7 wel werkte, maar inderdaad niet.

[8088]

Wiethoofd schreef op maandag 11 oktober 2010 @ 16:20:
Van de oude tables wil ik dus af

Behalve dat dit natuurlijk een non-argument is, is 't ook nog eens onjuist: de div tag bestaat langer dan de table tag.

[Wiethoofd]

8088 schreef op maandag 11 oktober 2010 @ 16:56:
Behalve dat dit natuurlijk een non-argument is, is 't ook nog eens onjuist: de div tag bestaat langer dan de table tag.

Wiethoofd schreef op maandag 11 oktober 2010 @ 16:34:
Het is omzetten van de oude site naar een wat overzichtelijkere basis, maar ik zal eens knutselen of ik het in een tabel wel crossbrowser werkend krijg...

---

Inmiddels de ul/lijst optie van moozzuzz toegepast welke werkt, maar met een display: inline-block en een vaste width voor de li's.