Toon posts:

[css] img in div wil maar niet verticaal uitlijnen

Pagina: 1
Acties:

Onderwerpen


  • Wiethoofd
  • Registratie: juli 2007
  • Laatst online: 04-10 20:12
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:
1
2
3
4
5
6
7
8
9
10
11
.imgcontainer {
    overflow: hidden;
    margin-bottom: 5px;
}
.imgcontainer .thumb {
    text-align: center;
    float: left;
    width: 190px;
    height: 100%;
    vertical-align: middle;
}
HTML:
1
2
3
4
5
6
7
8
   <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>

Wiethoofds meuk en 'overige'

Pagina: 1


Nintendo Switch (OLED model) Apple iPhone 13 LG G1 Google Pixel 6 Call of Duty: Vanguard Samsung Galaxy S21 5G Apple iPad Pro (2021) 11" Wi-Fi, 8GB ram Nintendo Switch Lite

Tweakers vormt samen met Hardware Info, AutoTrack, Gaspedaal.nl, Nationale Vacaturebank, Intermediair en Independer DPG Online Services B.V.
Alle rechten voorbehouden © 1998 - 2021 Hosting door True

Tweakers maakt gebruik van cookies

Bij het bezoeken van het forum plaatst Tweakers alleen functionele en analytische cookies voor optimalisatie en analyse om de website-ervaring te verbeteren. Op het forum worden geen trackingcookies geplaatst. Voor het bekijken van video's en grafieken van derden vragen we je toestemming, we gebruiken daarvoor externe tooling die mogelijk cookies kunnen plaatsen.

Meer informatie vind je in ons cookiebeleid.

Sluiten

Forum cookie-instellingen

Bekijk de onderstaande instellingen en maak je keuze. Meer informatie vind je in ons cookiebeleid.

Functionele en analytische cookies

Deze cookies helpen de website zijn functies uit te voeren en zijn verplicht. Meer details

janee

    Cookies van derden

    Deze cookies kunnen geplaatst worden door derde partijen via ingesloten content en om de gebruikerservaring van de website te verbeteren. Meer details

    janee