Onbekende afbeelding verticaal centreren

[mr32]

Hoi Allemaal. Ik ben bezig met een speeddial, veel werkt al, maar ik krijg de logo's van de websites niet netjes in het midden van de dial.



De dials zijn niks meer dan veredelde tabel, om alles een beetje netjes te houden (anders verschoof iedere keer alles, en werd het eigenlijk een puinhoop). De css code die ik gebruik voor de afbeeldingen:

Cascading Stylesheet:

.dialImage {
    display: block;

    max-width: 100%;
    max-height: 90%;
    
    margin-left: auto;
    margin-right: auto;
    
    margin-top: 3.5%;
    
    overflow: hidden;
}

Zoals je in het plaatje ziet, werkt dit prima voor een vierkant logo zoals die van facebook of twitter, maar een wat rechthoekiger logo zoals Youtube werkt dan natuurlijk niet. Is er een manier om elke afbeelding netjes in het midden te krijgen?

[Grijze Vos]

vertical-align: middle?

[mr32]

Heb ik geprobeerd door zowel de lineheight van de div waar de afbeelding instaat in te stellen op de vastgestelde hoogte ervan, met de vertical-align op middle. Ik kreeg het niet werkend. Ik heb die div al ingesteld als table-cell, en vervolgens weer vertical gealigned, maar dat resulteerde in niks...

Het kan goed zijn dat ik die trouwens verkeerd heb neergezet, elke dial bestaat uit veel divjes (voorkant, achterkant en een wrapper daarvoor enz.). Ik ga het even controleren

Edit: nee, het heeft geen effect op de positie van de afbeelding...

[ Voor 29% gewijzigd door mr32 op 17-07-2013 11:58 ]

[incaz]

http://css-tricks.com/centering-in-the-unknown/

Ik denk trouwens dat je er met een line-height gelijk aan dial-height, images als inline of inline-block en vertical-align: middle wel bent.

[ Voor 60% gewijzigd door incaz op 17-07-2013 12:19 ]

[The_Ghost16]

De plaatjes als background-image instellen met een "center center" position.

Zoiets als:
background-image: url(...) center center no-repeat;

Anders kun je nog gebruik maken van een display: table icm een display: table-cell.

Of als je echt de nieuwste techniek wilt gebruiken ga voor display: flex.

[mr32]

Bedankt voor jullie reacties! Ik heb ze allemaal geprobeerd, maar de tip op css-tricks.com gaf het beste resultaat. Door de divjes en zag ik de benodigde divjes niet meer, dus op een gegeven moment stond alles door elkaar. Ik heb een simpele pagina gemaakt, en het daarin uitgewerkt en dat gekopieerd naar dit project. Het werkte meteen!

[Grijze Vos]

Tip voor de volgende keer: jsfiddle.

[mr32]

Goeie tip, ga ik zeker doen!

[Verwijderd]

Een andere mogelijkheid is gebruik maken van transform: translate(-50%, -50%)

http://jsfiddle.net/MhFuv/