Afbeelding verticaal centrum

[baws]

Hallo

Ik heb een div van 250px x 250 px

Hierin heb ik een afbeelding die altijd 250px breed moet zijn.
Deze afbeelding kan verschillende hoogtes hebben, maximaal 150px.
Nu wil ik ervoor zorgen dat de afbeelding ook verticaal in het midden komt.

Ik heb een voorbeeld gemaakt:

http://jsfiddle.net/DxLsL/1/

Ik heb alle mogelijkhedenv van http://www.brunildo.org/test/img_center.html geprobeerd maar krijg er geen een werkend.

Heeft iemand een goede uitleg hoe ik het toch voor elkaar krijg?

 

[gast0187]

Hallo,

Je hebt niet alles gedaan wat moest.

dit is dus je html code:

<div id="box">
    <img src="http://www.sanisfeer.nl/media/img/merk/burgbad.png">
</div>

en css had je dit zie ik (zie rode kleur voor aanpassing):

#box
{
 width:250px;
 height:250px;
  background-color:#afafaf;
}

#box img
{
    width:100%;
}

Nou je hebt wel wat regels code vergeten. (er staat nergens gedefinieerd dat de img verticaal moet gecentreerd worden)

Met deze regels extra code moet het lukken:

display: table-cell;
text-align: center;
vertical-align: middle;

dan wordt je css:

#box
{
 width:250px;
 height:250px;
  background-color:#afafaf;
  [COLOR="#FF0000"]display: table-cell;
  text-align: center;
  vertical-align: middle;[/COLOR]
}

#box img
{
    width:100%;
}

Dit zal werken maar niet in alle browsers zoals IE 8.0, maar de meeste zullen vermoed ik wel meedoen.
Voor de overige browsers compatibel te krijgen is NOG iets extra's vereist.

Veel success

Mvg gast0187

 

[csshunter]

<div id="box">
    <img src="http://www.sanisfeer.nl/media/img/merk/burgbad.png">
</div>

#box {
	width: 250px;
	height: 250px;
	background-color: #afafaf;
	display: table-cell;
	line-height: 250px;
	}
#box img {
	width: 100%;
	vertical-align: middle;
	}

• Zie: img-halverwege-box.htm
• Goed genoeg voor Firefox, Chrome, Opera en Safari.
• En volgens Netrenderer.com ook Internet Explorer 7, 8 en 9 in dit theater!

Toelichting:
De vertical-align moet op het img zelf zitten, dan komt deze midden in een regel.
Met de line-height wordt de volle hoogte van de #box geclaimd voor de inhoud van de table-cell = de regelhoogte waarvan het midden moet worden bepaald.

Met vriendelijke groet,
CSShunter

 

[Naarling]

• En volgens Netrenderer.com ook Internet Explorer 7, 8 en 9 in dit theater!

Da's raar, want IE7 ondersteunt display:table-cell; volgens mij niet (helaas). Maar goed, het aantal IE7 gebruikers is klein en neemt steeds verder af dus of dat een probleem is is de vraag.

 

[csshunter]

Ja, ik was ook blij verrast dat IE7 het zomaar deed (had zelf ook in IE7 getest). IE6 kon in elk geval géén {display:table-cell} hanteren.
Nog even wat compatibility-bronnen geraadpleegd: iedereen zegt dat IE7 het niet kan! :shocked:

Toen nog eens de testpagina ingedoken. Wat blijkt: de hele {display:table-cell} kan gemist worden!

Een <div> met een line-height gelijk aan de hoogte + een img er in met {vertical-align: middle} is voldoende:

<div id="box">
	<img src="http://www.sanisfeer.nl/media/img/merk/burgbad.png">
</div>

#box {
	width: 250px;
	height: 250px;
	line-height: 250px;
	background-color: #afafaf;
	}
#box img {
	width: 100%;
	vertical-align: middle;
	}

Het maakt gewoon geen zier uit of er wel of niet een {display:table-cell} bij staat!
Logisch dat IE7 zonder table-cell ondersteuning toch net doet alsof het wel wordt ondersteund.

• Test: img-halverwege-box-2.htm
• Werkzaam in: Firefox, Chrome, Opera, Safari, Internet Explorer 7, 8, 9 en 10.

Met vriendelijke groet,
CSShunter