[css] verticaal centreren image

[tec]

Probleem:

HTML:

<div>
  <img src="bla.jpg"/>
</div>

Cascading Stylesheet:

div {
  width:10em;
  height:10em;
  text-align:center;
}

Hoe centreer ik nu het image naast horizontaal ook verticaal? De hoogte van het image varieerd.

Ik kan het altijd nog met javascript oplossen maar een css manier lijkt me wel netjes. Heb al wat rondgezocht maar alle verticaal centreer tutorials gaan ervan uit dat je de hoogte van het te centreren element al weet...

[ Voor 3% gewijzigd door tec op 06-02-2007 15:39 ]

[Spockz]

Cascading Stylesheet:

background-position:center center;

bron: http://www.w3schools.com/css/css_background.asp

Dit werkt uiteraard alleen als je het plaatje als background hebt gegeven. Anders moet je een van onderstaande oplossingen gebruiken.

[ Voor 38% gewijzigd door Spockz op 06-02-2007 15:45 ]

[Arethusa]

tec schreef op dinsdag 06 februari 2007 @ 15:38:
Probleem:

HTML:

<div>
  <img src="bla.jpg"/>
</div>

Cascading Stylesheet:

div {
  width:10em;
  height:10em;
  text-align:center;
}

Hoe centreer ik nu het image naast horizontaal ook verticaal? De hoogte van het image varieerd.

Ik kan het altijd nog met javascript oplossen maar een css manier lijkt me wel netjes. Heb al wat rondgezocht maar alle verticaal centreer tutorials gaan ervan uit dat je de hoogte van het te centreren element al weet...

toon volledige bericht

Cascading Stylesheet:

div {
  width:10em;
  height:10em;
  margin: 0 auto;
}

Bovenstaand werkt naar mijn idee en lijkt me wat je wil.

[flexje]

Modbreak:

of roep dan concreet een oplossing. Simpelweg verwijzen naar Google zonder de probleemstelling goed te begrijpen is dus niet gewenst

[ Voor 72% gewijzigd door BtM909 op 06-02-2007 15:58 ]

[Zeror]

Cascading Stylesheet:

div {
     ....
     vertical-align: middle;
    }

zou volgens mij (ook) moeten werken

[flexje]

Rakkerzero schreef op dinsdag 06 februari 2007 @ 15:44:

Cascading Stylesheet:

div {
     ....
     vertical-align: middle;
    }

zou volgens mij (ook) moeten werken

Ik neem aan dat het cross-browser moet zijn, laat em zelf is uitzoeken hoe of wat wel werkt....De juiste keywords in Google geeft ook de juiste resultaten...

Modbreak:

Als je voor de rest niks hebt toe te voegen, blijf dan uit het topic weg

[ Voor 10% gewijzigd door BtM909 op 06-02-2007 15:59 ]

[tec]

Spockz schreef op dinsdag 06 februari 2007 @ 15:40:

Cascading Stylesheet:

background-position:center center;

bron: http://www.w3schools.com/css/css_background.asp

Dit werkt uiteraard alleen als je het plaatje als background hebt gegeven. Anders moet je een van onderstaande oplossingen gebruiken.

Komop zeg, lees effe het topic, ik heb het over een IMG niet een background image als style.

Arethusa schreef op dinsdag 06 februari 2007 @ 15:40:
[...]

Cascading Stylesheet:

div {
  width:10em;
  height:10em;
  margin: 0 auto;
}

Bovenstaand werkt naar mijn idee en lijkt me wat je wil.

ja uhu, jij geeft bovenaan 0 marge en denkt dat het image op magische wijze verticaal gecentreerd wordt. dit kun je gebruiken horizontaal te centreren als de breedte van het te centreren element bekend is tenminste.

flexje schreef op dinsdag 06 februari 2007 @ 15:40:
http://www.google.nl/sear...&btnG=Google+zoeken&meta=

Wat een techniek he, een zoekmachine!

Zo zo bijdehandje.

Rakkerzero schreef op dinsdag 06 februari 2007 @ 15:44:

Cascading Stylesheet:

div {
     ....
     vertical-align: middle;
    }

zou volgens mij (ook) moeten werken

Al geprobeerd, werkt niet.

[Zeror]

Ff een wilde gok:

Cascading Stylesheet:

div {
     ....
     margin-top: 50%;
     margin-bottom: 50%;
    }

[tec]

flexje schreef op dinsdag 06 februari 2007 @ 15:46:
[...]


Ik neem aan dat het cross-browser moet zijn, laat em zelf is uitzoeken hoe of wat wel werkt....De juiste keywords in Google geeft ook de juiste resultaten...

Jonge geef me dan nu een voorbeeld waar verticaal gecentreerd wordt met een variabele hoogte op het te centreren element, en anders kap effe met het roepen van GOOGLE GOOGLE.

[tec]

Rakkerzero schreef op dinsdag 06 februari 2007 @ 15:52:
Ff een wilde gok:

Cascading Stylesheet:

div {
     ....
     margin-top: 50%;
     margin-bottom: 50%;
    }

de container zit zelf ook weer ergens in. dus op deze manier zou hij alles wat eromheen zit van zich weg duwen. Op de image geeft hetzelfde probleem, helaas.

[ikbenwouter]

Rakkerzero schreef op dinsdag 06 februari 2007 @ 15:52:
Ff een wilde gok:

Cascading Stylesheet:

div {
     ....
     margin-top: 50%;
     margin-bottom: 50%;
    }

Gaat niet werken, dan pakt hij de 50% van de breedte van je window / container.

[BtM909]

Probleem is dat je hiervoor display: table en table-cell kan gebruiken, maar dat het niet cross-browser is en eigenlijk gewoon weer een tabel simuleert. Je weet nl. niet wat de hoogte gaat worden en dat kan je dus alleen met JS afvangen.

[gertvdijk]

Rakkerzero schreef op dinsdag 06 februari 2007 @ 15:44:

Cascading Stylesheet:

div {
     ....
     vertical-align: middle;
    }

zou volgens mij (ook) moeten werken

Nee, gaat niet werken. Dat heeft te maken met de uitlijning van de basislijn van de tekst. Klik

Er zijn naar mijn weten twee mogelijke oplossingen:

• De background oplossing, zoals al genoemd.
• Er een table-cell van maken met css. Demo

edit: laatsgenoemde table-cell oplossing werkt hier prima in IE6 en FF, dus lijkt mij cross-browser genoeg.

[ Voor 7% gewijzigd door gertvdijk op 06-02-2007 16:01 ]

[Arethusa]

ja uhu, jij geeft bovenaan 0 marge en denkt dat het image op magische wijze verticaal gecentreerd wordt. dit kun je gebruiken horizontaal te centreren als de breedte van het te centreren element bekend is tenminste.

Probeer eens:

Cascading Stylesheet:

margin: auto auto;

[ Voor 23% gewijzigd door Arethusa op 06-02-2007 16:02 ]

[BtM909]

gertvdijk schreef op dinsdag 06 februari 2007 @ 15:57:
edit: laatsgenoemde table-cell oplossing werkt hier prima in IE6 en FF, dus lijkt mij cross-browser genoeg.

Nee, want er worden hacks gebruikt voor IE die weer niet werken in IE7 (alhoewel de hacks toevallig wel weer werken )

[Blaise]

'auto' margins werken niet verticaal (dan is het gewoon 0). Volgens mij is het onmogelijk met alleen CSS, zonder extra markup en cross-browser, als de grootte van je afbeelding dynamisch is.

[ Voor 55% gewijzigd door Blaise op 06-02-2007 16:10 ]

[tec]

Die table-cell is een iig een css oplossing, ga ik even induiken of het niet te bont is. thx btm909 en gertvdijk Hmz wel weer jammer dat de 'nette' oplossing dan weer niet werkt in IE7, dat maakt het meteen weer geen oplossing..

En ik wordt idd kortaf als er gewoon random dingen gereplied worden, en zeker als ik naar google gestuurd wordt zonder ook maar enige reden. Komop zeg. Voelt een beetje alsof mensen hier gewoon druk zijn hun post-count omhoog te spammen ipv redelijke suggesties te geven.

[ Voor 22% gewijzigd door tec op 06-02-2007 16:20 ]

[Spockz]

Als je het hele systeem zelf in handen hebt zou je misschien dat plaatje ook als achtergrond kunnen zetten. En op die manier heb je het hele probleem simpelweg opgelost. Klaar.

En ik vraag mij af waarom je zo negatief reageert op sommige posts.

[tec]

Spockz schreef op dinsdag 06 februari 2007 @ 16:23:
Als je het hele systeem zelf in handen hebt zou je misschien dat plaatje ook als achtergrond kunnen zetten. En op die manier heb je het hele probleem simpelweg opgelost. Klaar.

En ik vraag mij af waarom je zo negatief reageert op sommige posts.

Ik heb het systeem in handen, iig de frontend. Ik had wat betreft het plaatje duidelijker moeten aangeven dat het hier om content gaat (dus een foto, of andere beelden die bijdragen aan de content ipv de stijl van het document). Door het plaatje als background image in te stellen verlies je dus content. Mijn excuses dat ik tegen jou zo reageerde, wellicht had je jou oplossing niet aangedragen als ik wat duidelijker was geweest in eerste instantie.

[Anoniem: 136983]

ik weet niet of je het nou al helemaal hebt opgelost, maar dit werkt ook in iedergeval:
http://annevankesteren.nl/test/templates/center-hv.php

[tec]

Anoniem: 136983 schreef op dinsdag 06 februari 2007 @ 16:29:
ik weet niet of je het nou al helemaal hebt opgelost, maar dit werkt ook in iedergeval:
http://annevankesteren.nl/test/templates/center-hv.php

Ook bij dit voorbeeld wordt uitgegaan van het feit dat de hoogte van het te centreren element al bekend is.

[Spockz]

Heb je toevallig een voorbeeld van hoe je het wilt gaan gebruiken?

[tec]

Zie je windows mijn afbeeldingen folder daar heb je een filmstrip view. Elke image valt in een containertje en als image niet aan de juiste verhouding voldoen worden ze horizontaal of verticaal gecentreerd. Bij mij is het hetzelfde liedje alleen dan zonder de functionaliteit dat er ingezoomed wordt. Een perfecte thumbnail matched bij mij dus altijd de container, als ie kleiner is dan kan dat maar dan moet ie of horizontaal of verticaal of allebei gecentreerd worden.

[flexje]

Sorry als ik zo bijdehand overkwam, maar omdat dit "probleem" al zovaak besproken is, dacht ik dat het misschien sneller zou zijn om de search te gebruiken. Maargoed...

Hoe ik een div verticaal centreer is door de body een height van 100% te geven en daarna een "distance" div aan te maken met een height van 50%.

Na die distance div komt je content div...

Cascading Stylesheet:

html, body {
    height:100%;
    margin-top: 0px;
}
#distance { 
    width:1px;
    height:50%;
    margin-bottom:-13.75em; /* helft van container's height */
    float:left;
}
#content {
    position:relative; /* na distance */
    clear: left;
    margin: 0 auto;
}

[Spockz]

Aha, maar je hebt de bestanden dus wel lokaal staan. Je zou dus de bestandsafmetingen kunnen inlezen en aan de hand daar van de goede code kunnen genereren.

[tec]

flexje schreef op dinsdag 06 februari 2007 @ 16:44:
Sorry als ik zo bijdehand overkwam, maar omdat dit "probleem" al zovaak besproken is (ik denk dat je dat effe gemist hebt in de topic start), dacht ik dat het misschien sneller zou zijn om de search te gebruiken. Maargoed...

Okay, prima. Maar het gaat hier niet om een standaard centreer probleem, vandaar dat ik het ook post. Bij 99 van de 100 vertical centreer tutorials is de hoogte van het element bekend. Bij mij is dit niet zo.

flexje schreef op dinsdag 06 februari 2007 @ 16:44:
Hoe ik een div verticaal centreer is door de body een height van 100% te geven en daarna een "distance" div aan te maken met een height van 50%.

Na die distance div komt je content div...

Cascading Stylesheet:

html, body {
    height:100%;
    margin-top: 0px;
}
#distance { 
    width:1px;
    height:50%;
    margin-bottom:-13.75em; /* helft van container's height */
    float:left;
}
#content {
    position:relative; /* na distance */
    clear: left;
    margin: 0 auto;
}

toon volledige bericht

Ik denk dat dit niet werkt, als het image de volledige grootte van de container pakt dan denk ik dat ie op bovenstaande manier alsnog naar beneden geduwd wordt aangezien de distance div altijd 5em zou zijn in mijn voorbeeld.

Spockz schreef op dinsdag 06 februari 2007 @ 16:44:
Aha, maar je hebt de bestanden dus wel lokaal staan. Je zou dus de bestandsafmetingen kunnen inlezen en aan de hand daar van de goede code kunnen genereren.

We kunnen hier vanalles regelen om files te parsen en aan afmetingen te komen, maar als het zover moet gaan dan fix ik het wel met een kort unobtrusive javascriptje dat de boel centreerd.

[ Voor 59% gewijzigd door tec op 06-02-2007 16:53 ]

[Spockz]

Ja, misschien dat een javascriptje makkelijker is. Maar het is natuurlijk altijd netter om de code die je aanbied zoveel mogelijk geprepareerd te hebben. Anders kun je voor wel heel veel dingen JS gaan gebruiken.

@tec:
Daar heb je ook wel weer een punt.

[ Voor 9% gewijzigd door Spockz op 07-02-2007 09:07 ]

[tec]

Ik maak liever kleine visuele aanpassingen (extratjes, bijvoorbeeld rounded corners) met javascript zodat ik alle style gerelateerde zaken zoveel mogelijk clientside houd dan dat ik dit soort dingen serverside ga regelen.

[ Voor 10% gewijzigd door tec op 07-02-2007 08:49 ]

[Anoniem: 77658]

In FF kan je het werkend krijgen door de line-height van de div even hoog te maken als de div zelf en de vertical-align: middle zetten.

Vervolgens kan je voor IE met conditional comments een aparte stylesheet includen die met "expression" de absolute positie aanpast.
Ik zou wel een kijken of ik een voorbeeldje kan vinden
http://xlab6.com/vertical...using-css-firefox-and-ie/

Een andere mogelijkheid zou zijn met een serverside taal de grootte opvragen van de image en hiermee met margins het midden bepalen

//toevoeging
ik heb trouwens hier een goede site met een css only oplossing:
http://www.brunildo.org/test/img_center.html
Ik heb niet echt naar de code gekeken, maar dit leek me, op het eerste gezicht, een goede oplossing

[ Voor 23% gewijzigd door Anoniem: 77658 op 07-02-2007 09:51 ]

[tec]

Anoniem: 77658 schreef op woensdag 07 februari 2007 @ 09:45:
In FF kan je het werkend krijgen door de line-height van de div even hoog te maken als de div zelf en de vertical-align: middle zetten.

Vervolgens kan je voor IE met conditional comments een aparte stylesheet includen die met "expression" de absolute positie aanpast.
Ik zou wel een kijken of ik een voorbeeldje kan vinden
http://xlab6.com/vertical...using-css-firefox-and-ie/

Een andere mogelijkheid zou zijn met een serverside taal de grootte opvragen van de image en hiermee met margins het midden bepalen

//toevoeging
ik heb trouwens hier een goede site met een css only oplossing:
http://www.brunildo.org/test/img_center.html
Ik heb niet echt naar de code gekeken, maar dit leek me, op het eerste gezicht, een goede oplossing

Hey das nie verkeerd

Ik denk dat ik maar voor de eerste oplossing ga, aangezien de stylesheets voor ie6 en ie7 toch binnen conditional comments vallen vind ik zo'n expression niet zo'n probleem. Liever dat dan dat er weer een extra element de dom komt vervuilen

Thx!

[LionOne]

Wat ook werkt en cross browser is:

HTML:

<div id="image"> 
  <img  src="bla.jpg"/> 
</div>

Cascading Stylesheet:

#image {
    height:500px;
    width:500px;
}

#image img {
    position:relative;
    top:50%;
    margin-top:-100px;   (50% van de hoogte van de afbeelding negatief!)
}

Op deze manier plaats je dus de afbeelding vertikaal op de helft de div, en vervolgens zet je 'm de helft van z'n eigen hoogte weer omhoog.

[Zeror]

LionOne schreef op donderdag 08 februari 2007 @ 00:34:

HTML:

<div id="image"> 
  <img  src="bla.jpg"/> 
</div>

Cascading Stylesheet:

#image {
    height:100%;
    width:100%;
}

#image img {
    position:relative;
    top:50%;
    margin-top:-50%;   (50% van de hoogte van de afbeelding negatief!)
}

toon volledige bericht

Dan zou ie zo moeten zijn, want de groottes van de plaatjes waren variable.

[ Voor 6% gewijzigd door Zeror op 08-02-2007 01:33 ]

[tec]

Rakkerzero schreef op donderdag 08 februari 2007 @ 01:33:
[...]

Dan zou ie zo moeten zijn, want de groottes van de plaatjes waren variable.

Plaatjes zijn idd variabel dus post van voorganger werkt niet (gaat uit van 100px) jou oplossing werkt overigens ook niet aangezien je met top:50% op de helft van de container uit komt, maar omdat je een margin van -50% invoert direct weer op top:0 zit.

[MoietyMe]

Enorme kick..

Maar misschien is dit handig voor andere mensen die dit probleem nog hebben:

HTML:

<div id="image"> 
  <img  src="bla.jpg"/> 
</div>

Cascading Stylesheet:

#image {
    height:200px;
    width:150px;
}

#image img {
    position:relative;
    top:50%;
    margin-top:-25%;
}

Zo werkt het bij mij perfect (Firefox 2.0.0.9, Opera 9.23, Safari 3.0.4, IE5 - IE7). Alleen een vage bug in IE6. Daar werkt het op mijn machine pas als ik de eigenschappen van het plaatje oproep. Kan het jammer genoeg niet op een andere machine met IE6 proberen, aangezien die er niet is

Online voorbeeld: http://dev.agosto.nl/vertical-center/

[ Voor 8% gewijzigd door MoietyMe op 19-11-2007 10:53 ]

[TeeDee]

Werkt dit dus ook met een afbeelding waar je de dimensies _niet_ van weet? Zo te zien niet.

[MoietyMe]

TeeDee schreef op maandag 19 november 2007 @ 11:22:
Werkt dit dus ook met een afbeelding waar je de dimensies _niet_ van weet? Zo te zien niet.

Juh, heb het zelf getest. Zoals je in het online voorbeeld ziet heb ik gewoon een willekeurige afbeelding genomen. Verder in de css ook geen hoogtes aangegeven. Je moet dus alleen even kijken hoe het met IE6 zit aangezien ik hier maar een machine met IE6 heb, en die is virtueel. Dus misschien dat het ergens anders wel werkt.

[TeeDee]

O wacht, zit stom te kijken. Je hebt de containing div een dimensie meegegeven.

Even verder testen/rommelen

Als ik afbeelding + code op mijn testcase bekijk werkt het aardig. Maar pas eens voor de gein de width naar bijvoorbeeld 1000px gaat het nog niet helemaal goed

[ Voor 57% gewijzigd door TeeDee op 19-11-2007 11:40 ]

[Anoniem: 177275]

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Universal vertical center with CSS</title>
  <style>
    .greenBorder {border: 1px solid green;} /* just borders to see it */
  </style>
</head>

<body>
  <div style="display: table; height: 600px; #position: relative; overflow: hidden;width:1000px" class="greenBorder">
    <div style=" #position: absolute; #top: 50%;display: table-cell; vertical-align: middle;">
      <div class="greenBorder" style=" #position: relative; #top: -50%">
    <img src="http://p.vtourist.com/1894345-Leopard_spots-Kruger_National_Park.jpg" allt="leopard">
      </div>
    </div>
  </div>
</body>
</html>

De oplossing voor dit probleem vond ik toevallig gisteren op http://www.jakpsatweb.cz/...ical-center-solution.html. Daar zijn ook versies zonder hacks beschikbaar.

Getest in Safari, Firefox, Opera, IE7. Werkt niet in IE5-Mac (who cares).

[Mei]

HTML:

<div>
<img src="#">
</div>

Cascading Stylesheet:

div
{
height:300px;
line-height:300px;
}
img
{
vertical-align:middle;
}

Kan ook een oplossing te zijn. Vertical-align is soms best handig, maar je moet onthouden dat de regelhoogte (line-height) daarvoor wel groot genoeg moet zijn.

[MoietyMe]

Mei schreef op woensdag 21 november 2007 @ 20:53:

HTML:

<div>
<img src="#">
</div>

Cascading Stylesheet:

div
{
height:300px;
line-height:300px;
}
img
{
vertical-align:middle;
}

Kan ook een oplossing te zijn. Vertical-align is soms best handig, maar je moet onthouden dat de regelhoogte (line-height) daarvoor wel groot genoeg moet zijn.

toon volledige bericht

Dat ziet er nog eens simpel uit. Werkt dat in alle major browsers? Dus IE6-IE7, FF, Safari en Opera?

[Mei]

Yep

[Spockz]

Omdat IE7 ook rendert wat firefox kan renderen (althans hierzo) heb ik zijn voorbeeld even wat aangepast:

Cascading Stylesheet:

#outer {position: relative;}
#middle {position: absolute; _top: 50%} /* for _prefix explorer <7 only*/
#inner{position: relative; top: 25%; _top: -50%; width: 628px;} /* top for IE7 _top for explorer <6 */

Niet zo heel netjes misschien, maar dit staat in een stylesheet voor enkel IE dus dan mag het wel vind ik.