Centrare verticalmente un'immagine in un div

[laracrack]

Ciao,
come faccio a centrare verticalmente un'immagine in un div
senza usare il padding?

#R1{
width: 100px;
height: 40px;
}

<div id="R1">
[img]Img.gif[/img]
</div>

Grazie, .
Lara Forcellini.

[Marcolino's]

Usando il margin

Oppure più semplicemente con il posizionamento assoluto.

Leggi qui:
http://www.constile.org/template/centrare_il_box/

[pierofix]

Dovresti usare il line-height, che è poi lo stesso trucchetto per centrare il testo. In pratica imposti al line-height (l'interlinea) lo stesso valore dell'altezza del div.

[awd]

trattandosi di un'immagine, quindi un elemento inline, puoi usare anche la proprietà vertical-align

[Marcolino's]

Originariamente inviato da awd
trattandosi di un'immagine, quindi un elemento inline, puoi usare anche la proprietà vertical-align

Dipende da dove si trova.
Dalla DTD XHTML Strict.

<!ELEMENT pre %pre.content;>
<!ATTLIST pre
  %attrs;
  xml:space (preserve) #FIXED 'preserve'
  >

C'è scritto chiaramente che in un campo testo preformattato <pre>, le immagini non sono considerate inline.

E infatti nella stessa DTD, gli elementi a livello di blocco, sono:

<!ENTITY % heading "h1|h2|h3|h4|h5|h6">
<!ENTITY % lists "ul | ol | dl">
<!ENTITY % blocktext "pre | hr | blockquote | address">

<!ENTITY % block
     "p | %heading; | div | %lists; | %blocktext; | fieldset | table">

<!ENTITY % Block "(%block; | form | %misc;)*">


<!ENTITY % Flow "(#PCDATA | %block; | form | %inline; | %misc;)*">

Che non contiene l'elemento IMG, dandolo per forza tra gli elementi inline.
Insomma attenzione che IMG si comporta in modo diverso, dipendente dal contesto.

Ovvio questa è solo la DTD Strict di XHTML 1.0 per le altre controllate voi, ma non credo che ci saranno variazioni di sorta.

Resta il fatto, che qui abbiamo indicato diversi metodi per allinerare l'aimmagine alla finestra, tutti validi, dipende dal contesto.

[laracrack]

Ciao a tutti,
grazie per le risposte,
il line-height e il vertical-align non "funzionano",
ma ho risolto con il margin.
, Lara.

[pierofix]

Come non funziona il line-height? Hai provato una cosa del genere?

<div id="slogan">
   [img]...[/img]
</div>

#logo {
   width:100px; height:100px;
   margin:0; padding:0;
}
#slogan {
   height:200px; line-height:200px;
}

[laracrack]

Si si ho provato, ma il logo lo lascia in alto a sinistra.