Imam div z dvema slikama in h1
. Vse slike morajo biti navpično poravnane v divu, druga ob drugi.
Ena od slik mora biti absolutno
postavljena znotraj diva.
Kakšen CSS je potreben, da bo to delovalo v vseh običajnih brskalnikih?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Vsi morajo biti navpično poravnani znotraj div
Kako izravnano? So vrhovi slik poravnani z vrhom besedila?
Ena od slik mora biti absolutno postavljena v div.
Absolutno postavljena glede na DIV? Morda lahko narišete, kaj iščete...?
fd je opisal korake za absolutno pozicioniranje in prilagoditev prikaza elementa H1
tako, da bodo slike prikazane v vrsti z njim. K temu bom dodal, da lahko slike poravnate z uporabo sloga vertical-align
:
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...s tem bi postavili glavo in slike skupaj, pri čemer bi bili zgornji robovi poravnani. Obstajajo tudi druge možnosti poravnave; glej dokumentacijo. Morda se vam bo zdelo koristno tudi, da opustite DIV in slike premaknete znotraj elementa H1
- to zagotavlja semantično vrednost vsebnika in odpravlja potrebo po prilagajanju prikaza elementa H1
:
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
Privzeto je h1 element bloka in se prikaže v vrstici za prvim img, drugi img pa se prikaže v vrstici, ki sledi bloku.
Če želite temu preprečiti, lahko nastavite h1 na obnašanje v vrstičnem toku:
#header > h1 { display: inline; }
Kar zadeva absolutno pozicioniranje img v notranjosti div, morate nastaviti vsebujoči div, da ima "znano velikost", preden bo to delovalo pravilno. Po mojih izkušnjah morate spremeniti tudi atribut position, ki ni privzet - pri meni deluje position: relative:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
Če vam to uspe, lahko poskusite postopoma odstraniti atribute height, width in position iz div.header, da dobite minimalno število atributov, potrebnih za želeni učinek.
DOPOLNITEV:
Tukaj je popoln primer, ki deluje v brskalniku 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;">
...
ali CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}