Archief - HTML: img verticaal centreren in div

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
L

Le Preinz

Legacy Member
De img zit in de div. De div heeft vaste afmetingen. De img kan een variabele hoogte hebben. Nu zou die img altijd mooi in het midden van die div moeten staan.

Nu los ik het op door binnenin die div een tabel te zetten met 1 cel waarvan valign="middle". Dit is niet correct, werkt wél maar is veel te omslachtig.
D

DarkBone

Legacy Member
Dat is hier al meerdere malen gevraagd.
Dit is een hint ja.
C

Cakeman

Legacy Member
Code: 
<html>
<head>
	<title>Vertical Alignment</title>
	<style type="text/css">
		#wrapper {
			border: 1px solid #666;
			width: 300px;
			height: 300px;
			margin: auto;
		}
		#prentje {
			position: relative;
			top: 50%;
			left: 50%;
                        width: 63px;
                        height: 63px;
			margin-left: -37px; /* de helft van de breedte van je prentje */
			margin-top: -37px; /* de helft van de hoogte van je prentje */
		}
	</style>
</head>
<body>
	<div id="wrapper">
		<img src="pic.gif" id="prentje" />
	</div>
</body>
</html>

Voorbeeld: http://users.pandora.be/cakeman/cakeman/tests/vertalign/
L

Le Preinz

Legacy Member
DarkBone zei:
Dat is hier al meerdere malen gevraagd.
Dit is een hint ja.
Klik om te vergroten...

heel vriendelijk en cakeman ook bedankt maar ik zoek een manier die niet afhankelijk is van de hoogte van de prent. Deze manier gebruik ik al voor andere onderdelen van de site.
C

Cakeman

Legacy Member
Werk je met PHP ofzo? In dat geval kan je gewoon inline CSS laten genereren en die in de img-tag echo-en.
L

Le Preinz

Legacy Member
nope momenteel ga ik probere om alles gewoon op mijn tn ruimte te zetten.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan