Ho un div con due immagini e un h1
. Tutte devono essere allineate verticalmente all'interno del div, una accanto all'altra.
Una delle immagini deve essere posizionata in modo assoluto
all'interno del div.
Qual è il CSS necessario perché questo funzioni su tutti i browser comuni?
<div id="header">
<img src=".." ></img>
<h1>testing...</h1>
<img src="..."></img>
</div>
Tutti devono essere allineati verticalmente all'interno del div
Allineati come? Le parti superiori delle immagini allineate con la parte superiore del testo?
Una delle immagini deve essere posizionata in modo assoluto all'interno del div.
Assolutamente posizionata relativamente al DIV? Forse potresti abbozzare quello che stai cercando...?
fd ha descritto i passi per il posizionamento assoluto, così come la regolazione della visualizzazione dell'elemento H1
in modo che le immagini appaiano in linea con esso. A questo, aggiungo che è possibile allineare le immagini utilizzando lo stile vertical-align
:
#header h1 { display: inline; }
#header img { vertical-align: middle; }
...questo metterebbe l'intestazione e le immagini insieme, con i bordi superiori allineati. Esistono altre opzioni di allineamento; vedi la documentazione. Potresti anche trovare vantaggioso eliminare il DIV e spostare le immagini all'interno dell'elemento H1
- questo fornisce un valore semantico al contenitore, e rimuove la necessità di regolare la visualizzazione del H1
:
<h1 id=header">
<img src=".." ></img>
testing...
<img src="..."></img>
</h1>
Per default h1 è un elemento di blocco e renderà sulla linea dopo la prima img, e farà apparire la seconda img sulla linea che segue il blocco.
Per evitare che questo accada puoi impostare l'h1 per avere un comportamento di flusso in linea:
#header > h1 { display: inline; }
Per quanto riguarda il posizionamento assoluto dell'img all'interno del div, devi impostare il div che la contiene per avere una "dimensione nota" prima che questo funzioni correttamente. Nella mia esperienza, avete anche bisogno di cambiare l'attributo position lontano dal default - position: relative funziona per me:
#header { position: relative; width: 20em; height: 20em; }
#img-for-abs-positioning { position: absolute; top: 0; left: 0; }
Se riesci a farlo funzionare, potresti provare a rimuovere progressivamente gli attributi di altezza, larghezza e posizione dal div.header per ottenere gli attributi minimi richiesti per ottenere l'effetto che vuoi.
AGGIORNAMENTO:
Ecco un esempio completo che funziona su 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;">
...
o CSS
.someClass
{
display: table-cell;
vertical-align:middle;
}