Centratura verticale in un box

**JoeP** · 20-10-2007, 17:38

Ho un DIV contenitore con le dimensioni specificate, ad esempio:
div.box {
height: 100px;
width: 100px; }

Al suo interno ho solo un link A con immagine <IMG>, in HTML sarebbe:
<p class="box">
[img]foto.jpg[/img]
</p>

Come faccio se la mia immagine foto.jpg è alta meno di 100px a centrarla verticalmente nel riquadro? E' possibile?

**copsteve** · 21-10-2007, 12:19

Dovresti agire tramite la proprietà line-height...
Prova a fare una ricerca all'interno del forum inserendo ad es. "centratura verticale"...

**JoeP** · 21-10-2007, 12:51

Le ho provate tutte. In pratica quello che mi serve è esattamente questo:
http://css.html.it/articoli/leggi/17...ate-con-i-css/
http://www.html.it/articoli/1733/esempio1.html

Ne ho copiato il codice sulla mia pagina, ma non funziona (uso Firefox per il test)!

div.th è il contenitore a dimensione fissa, al suo interno ho la img in genere più piccola che dovrebbe centrarsi:

codice:

div.th {
	height: 104px;
	line-height: 104px;
	margin-top: 3px;
	text-align: center; }

div.th img {
	vertical-align: middle; }

<div class="th">[img]foto.jpg[/img]</div>

**JoeP** · 21-10-2007, 12:57

Ecco, ho appena trovato il problema, e che problema!
Dipende dalla dichirazione del DOCTYPE della pagina.

Sulle mie pagine XHTML 1.0 Transitional il codice che ho postato nel precedente post non ha nessun effetto. La dichirazione è:

codice:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Mentre se dichiaro HTML 4.0 funziona tutto!

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

Ma che fregatura! Io voglio le mie pagine XHTML, devono esserlo! Come posso fare? Ci sono soluzioni?

**Mich_** · 22-10-2007, 10:13

A dispetto del nome (ma perche` usi nomi di oggetti HTML?) th NON e` una tabella o suo elemento, quindi il vertical align non ha effetto.
Il fatto che funzioni in qualche brwoser quando non dichiari la DTD dipende da come i brwoser in tal caso interpretano il codice: sono liberi di farlo come piu` piace a loro.

Visto che vuoi usare XHTML, e` meglio se lo usi correttamente. Non si puo` inserire un testo direttamente dentro un <div>. Puoi metterci un

.
In alternativa puoi rendere l'immagine di tipo block, ma se questa deve essere un link il problema si ripresenta con il tag <a>. Quindi ti consiglio:

codice:

<div class="th1">
  <a href="..." title="...">
    [img]foto.jpg[/img]
  </a>
</div>

Cui corrisponde un CSS del tipo:

codice:

.th1 {
  height: 104px;
  line-height: 104px;
  margin-top: 3px;     /* questo non lo capisco */
  text-align: center; 
}
.th1 a {
  display: block;
  width: 100%; height: 100%;
  line-height: 104px;
}

Lo stile relativo ad <a> potrebbe anche non servire.

In alternativa (sfruttando i CSS2 - in parte non riconosciuti da IE6)

codice:

.th1 {
  height: 104px;
  line-height: 104px;
  text-align: center; 
}
.th1 a {
  display: block;
  width: 100%; height: 100%;
  line-height: 104px;
  display: table-cell;
  vertical-align: middle;
  text-align: center; 
}

**JoeP** · 22-10-2007, 16:09

Originariamente inviato da Mich_
A dispetto del nome (ma perche` usi nomi di oggetti HTML?) th NON e` una tabella

M'è scappato così, perchè è il contenitore di una minuatura (thumbnail).

margin-top: 3px; /* questo non lo capisco */

E' semplicemente un margine. Mi serve per distanziare il DIV da uno sopra

In ogni caso il codice (ho provato i tuoi) continua a non funzionare, purtroppo...

Mi sto arrendendo... Quasi quasi, essendo che il sito fa uso di PHP, leggo l'altezza dell'immagine e poi le do un margine superiore in modo dinamico, largo (104 - altezzaimg) / 2... Squallido, ma in teoria funziona.

Discussione: Centratura verticale in un box

Strumenti discussione

Ricerca discussione

Visualizza

Centratura verticale in un box

Permessi di invio