Jeg har en div med to bilder og en h1
. Alle av dem må være vertikalt justert i div, ved siden av hverandre.
Ett av bildene må være absolutt
plassert innenfor div.
Hvilken CSS er nødvendig for at dette skal fungere i alle vanlige nettlesere?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Alle må være vertikalt justert innenfor divisjonen.
Justert hvordan? Toppen av bildene justert med toppen av teksten?
Ett av bildene må være absolutt posisjonert innenfor div.
Absolutt plassert i forhold til DIV? Kanskje du kan skissere hva du leter etter ...?
fd har beskrevet trinnene for absolutt posisjonering, samt justering av visningen av H1
-elementet slik at bildene vises på linje med det. Til det vil jeg legge til at du kan justere bildene ved hjelp av vertical-align
-stilen:
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...dette vil sette overskriften og bildene sammen, med toppkantene justert. Det finnes andre justeringsalternativer; se dokumentasjonen. Det kan også være en fordel å droppe DIV og flytte bildene inn i H1
-elementet - dette gir semantisk verdi til beholderen, og fjerner behovet for å justere visningen av H1
:
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
Som standard er h1 et blokkelement og vil gjengis på linjen etter det første img-bildet, og vil føre til at det andre img-bildet vises på linjen etter blokken.
For å hindre at dette skjer, kan du angi at h1 skal ha inline flow-oppførsel:
#header > h1 { display: inline; }
Når det gjelder absolutt posisjonering av img inne i div , må du sette den inneholdende div til å ha en " kjent størrelse " før dette fungerer som det skal. Etter min erfaring må du også endre posisjonsattributtet bort fra standard - posisjon: relativ fungerer for meg:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
Hvis du kan få det til å fungere, kan det være lurt å prøve å gradvis fjerne høyde, bredde, posisjonsattributter fra div.header for å få de minste nødvendige attributtene for å få den effekten du ønsker.
OPPDATERING:
Her er et komplett eksempel som fungerer på 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;">
...
eller CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}