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'


  • Wiethoofd
  • Registratie: juli 2007
  • Laatst online: 04-10 20:12
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]

Wiethoofds meuk en 'overige'


  • Wiethoofd
  • Registratie: juli 2007
  • Laatst online: 04-10 20:12
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.

Wiethoofds meuk en 'overige'


  • Wiethoofd
  • Registratie: juli 2007
  • Laatst online: 04-10 20:12
Daar ook mee zitten spelen, een vertical-align op de img zelf werkt ook niet.

Wiethoofds meuk en 'overige'


  • Wiethoofd
  • Registratie: juli 2007
  • Laatst online: 04-10 20:12
Van de oude tables wil ik dus af :P 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...

Wiethoofds meuk en 'overige'


  • Wiethoofd
  • Registratie: juli 2007
  • Laatst online: 04-10 20:12
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...

Wiethoofds meuk en 'overige'


  • Wiethoofd
  • Registratie: juli 2007
  • Laatst online: 04-10 20:12
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.

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