Minulla on div, jossa on kaksi kuvaa ja h1
. Kaikkien niiden on oltava pystysuorassa linjassa divin sisällä, toistensa vieressä.
Toisen kuvista on oltava absoluuttisesti
sijoitettu divin sisällä.
Mitä CSS:ää tarvitaan, jotta tämä toimisi kaikilla yleisillä selaimilla?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Kaikkien niiden on oltava pystysuorassa linjassa div:n sisällä.
Tasattu miten? Kuvien yläosat kohdistetaan tekstin yläosan kanssa?
Yhden kuvista on oltava absoluuttisesti sijoitettu div:n sisällä.
Absoluuttisesti sijoitettu suhteessa DIViin? Ehkä voisit hahmotella, mitä etsit...?
fd on kuvannut absoluuttisen asemoinnin vaiheet sekä H1
-elementin näytön säätämisen niin, että kuvat näkyvät rivissä sen kanssa. Tähän lisään vielä, että voit kohdistaa kuvat käyttämällä tyyliä vertical-align
:
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...tämä asettaisi otsikon ja kuvat yhteen, yläreunat kohdistettuina. Muitakin kohdistusvaihtoehtoja on olemassa; katso dokumentaatio. Saattaa myös olla hyödyllistä poistaa DIV ja siirtää kuvat H1
-elementin sisään - tämä antaa semanttista arvoa säiliölle ja poistaa tarpeen säätää H1
-elementin näyttöä:
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
Oletusarvoisesti h1 on lohkoelementti, ja se renderöityy ensimmäisen img:n jälkeiselle riville, ja aiheuttaa toisen img:n ilmestymisen lohkon jälkeiselle riville.
Voit estää tämän tapahtumasta asettamalla h1-elementille inline flow -käyttäytymisen:
#header > h1 { display: inline; }
Mitä tulee img:n absoluuttiseen sijoitteluun divin sisällä, sinun on asetettava sisältävälle diville "tunnettu koko" ennen kuin tämä toimii oikein. Kokemukseni mukaan sinun on myös muutettava position-attribuutti pois oletusarvosta - position: relative toimii minulla:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
Jos saat tämän toimimaan, voit kokeilla poistaa asteittain height-, width- ja position-attribuutit div.headerista, jotta saat haluamasi vaikutuksen aikaansaamiseksi tarvittavat attribuutit minimiin.
UPDATE:
Tässä on täydellinen esimerkki, joka toimii Firefox 3:ssa:
<!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;">
...
tai CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}