Ik heb een div met twee afbeeldingen en een h1
. Ze moeten allemaal verticaal uitgelijnd worden binnen de div, naast elkaar.
Een van de afbeeldingen moet absoluut
gepositioneerd worden binnen de div.
Wat is de CSS die nodig is om dit te laten werken op alle gangbare browsers?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Ze moeten allemaal verticaal uitgelijnd worden binnen de div
Uitgelijnd hoe? Bovenkant van de afbeeldingen uitgelijnd met de bovenkant van de tekst?
Eén van de afbeeldingen moet absoluut gepositioneerd worden binnen de div.
Absoluut gepositioneerd ten opzichte van de DIV? Misschien kunt u schetsen waar u naar op zoek bent...?
fd heeft beschreven de stappen voor absolute positionering, evenals het aanpassen van de weergave van het H1
element, zodat de afbeeldingen inline met het verschijnen. Daaraan voeg ik toe dat je de afbeeldingen kunt uitlijnen door gebruik te maken van de vertical-align
stijl:
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...dit zou de header en de afbeeldingen samen zetten, met de bovenranden uitgelijnd. Er zijn nog andere uitlijn opties; zie de documentatie. Je zou het ook nuttig kunnen vinden om de DIV te laten vallen en de afbeeldingen binnen het H1
element te plaatsen - dit geeft semantische waarde aan de container, en verwijdert de noodzaak om de weergave van de H1
aan te passen:
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
Standaard is h1 een blok-element en zal verschijnen op de lijn na de eerste img, en zal ervoor zorgen dat de tweede img verschijnt op de lijn na het blok.
Om dit te voorkomen kun je de h1 instellen op inline flow gedrag:
#header > h1 { display: inline; }
Wat betreft het absoluut positioneren van de img binnen de div, moet je de bevattende div een "bekende grootte" geven voordat dit goed zal werken. In mijn ervaring moet je ook het positie attribuut veranderen, weg van de standaard - positie: relatief werkt voor mij:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
Als je dat voor elkaar krijgt, kun je proberen om geleidelijk de hoogte, breedte en positie attributen uit div.header te verwijderen om de minimaal vereiste attributen te krijgen om het effect te krijgen dat je wilt.
UPDATE:
Hier is een compleet voorbeeld dat werkt op Firefox 3:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Example of vertical positioning inside a div</title>
<style type="text/css">
#header > h1 { display: inline; }
#header { border: solid 1px red;
position: relative; }
#img-for-abs-positioning { position: absolute;
bottom: -1em; right: 2em; }
</style>
</head>
<body>
<div id="header">
<img src="#" alt="Image 1" width="40" height="40" />
<h1>Header</h1>
<img src="#" alt="Image 2" width="40" height="40"
id="img-for-abs-positioning" />
</div>
</body>
</html>
<div id="header" style="display: table-cell; vertical-align:middle;">
...
of CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}