centratura verticale img in div 100%

**jackweb** · 09-01-2008, 14:29

Salve...come dal titolo il mio problema è la centratura di una immagine all'interno di un box.

Il primo box contenitore ha dimensioni fisse 140px x 140px.

All'interno ho messo un secondo box in 100% che dovrebbe poi posizionare l'immagine centralmente rispetto il box contenitore, sia in orizzontale che in verticale.

Non riesco a centrare l'immagine verticalmente...questo è il mio problema!

Come posso ottenere il risultato secondo voi? :master:

Sono costretto ad usare questa soluzione dato che sarà l'anteprima di una gallery in php, perciò le img varieranno, saranno sia orizzontali che verticali...a me serve centrarle in questo box 140x140 al di là della loro dimensione...di qui una soluzione elastica.

Ma non riesco proprio a trovare la soluzione...

Grazie.

**jackweb** · 09-01-2008, 15:48

Ho provato a cercare qui sul forum ma non ho trovato nulla che mi aiutasse a risolvere il problema...è la gestione dell posizionamento verticale che mi mette in crisi!!!

**Mich_** · 09-01-2008, 16:04

Per centrare in vert. un elemento di tipo inline devi dare il line-height uguale all'altezza. Nel tuo caso :

codice:

#boxcontenitore {
  height: 140px;
  width: 140px;
  text-align: center;
  line-height: 140px;
}

**jackweb** · 09-01-2008, 16:22

Grazie Mich...ci avevo provato ma mi funziona solamente con il testo e non con il tag img. ti posto il codice:

<div id="box_doppia_anteprima">
<div id="box_01_anteprima" align="left">
<div id="box_sinistro">[img]img/lista_lavori/anteprima.jpg[/img]</div>
<div id="box_destro"></div>
</div>

#box_doppia_anteprima{
width: 600px;
height: 100%;
background-color: black;
background-color: #999999;
}

#box_01_anteprima{
width: 290px;
height: 120px;
background-color: red;
float: left;
}

#box_02_anteprima{
width: 290px;
height: 120px;
background-color: red;
float: right;
}
#box_sinistro{
width: 120px;
height: 120px;
background-color: brown;
line-height: 120px;
}

#box_destro{
width: 170px;
height: 120px;
background-color:white;
margin-left: 120px;
margin-top: -120px;
}

**Mich_** · 09-01-2008, 17:05

Anzitutto una premessa: quando inserisci codice, usa sempre i tag VBcode corrretti ([ code ] oppure [ PHP ] - trovi come inserirli premendo sui bottoni sopra l'area di inserimento testo).

Il tuo codice mescola un po` di tecniche diverse, e questo puo` portare confusione.

Se usi i float, devi anche metterci un clear alla fine. Ma prova a non usare i float, se puoi: potrebbe essere un elemento di disturbo.
Se usi i CSS devi eliminare la formattazione HTML, che in qualche browser interagisce in modo errato con i CSS (mi riferisco all'attributo align)

Non vedo il DOCTYPE che usi, per cui non riesco a fare una dignosi precisa.
E non dici in quale/i browser hai testato (in queste cose il comportamento puo` essere diverso) - io mi riferisco a browser standard (potrebbe non funzionare in IE).

**jackweb** · 09-01-2008, 17:42

Hai ragione Mich...ma postando raramente il codice non ho gran manualità nell'inserimento, perdono!
Ti ho postato solo il codice relativo all'img...il clear è inserito successivamente.
I browser con i quali testo solitamente sono tutti i classic inclusi safari e opera, ma purtroppo queste reazioni le ho già da FF e IE7....brutto segno.

La cosa strana è che copiandolo in una pagina vuota riscontro lo stesso problema, si centra orizzontalmente tramite il text-align(assente nel codice appena postato) e togliendo la formattazione html, ma non verticalmente.

Codice PHP:


<!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"><meta http-equiv="Content-Type" content="text/html; charset=utf-8"

Ho provato anche questa soluzione con un nulla di fatto, stessa reazione, si predispone in alto ecntrata.:

Codice PHP:


    div.box_sinistro{

    width: 120px;

    height: 120px;

    line-height:120px;

    text-align:center;

    background-color: brown;



}    



    div.box_sinistro img{

    vertical-align: middle;

}





<div class="box_sinistro">[img]img/lista_lavori/anteprima.jpg[/img]</div>

Potrebbe essere realmente il DOCTYPE???

Spero di aver postato il codice come si dovrebbe....

Grazie sempre della disponibilità.

**Mich_** · 09-01-2008, 18:35

Cosa e` quel "vertical-align"?
Non lo puoi usare in quel modo: funziona solo nelle tabelle.
Per FF puoi definire
display: table-cell;
nel blocco, ed allora puoi usare il vertical-align (nella cella, non nell'immagine ! ), ma in IE non funziona.

Esiste un altro modo per centrare verticalmente, ma richiede posizionamenti assoluti o relativi (e quindi applicabile solo ai blocchi, non agli elementi inline).
Potresti trasformare l'immagine in blocco, e centrarla con i posizionamenti e i margini negativi, ma e` necessario dare position:relative; a tutti i blocchi contenitori, ricorsivamente fino al body. E` una soluzione che non mi piace, ma potrebbe fuzionare

**jackweb** · 09-01-2008, 22:55

Grazie mich.
Il vertical-align lo avevo visto qui in giro nel forum così ho pensato che si potesse usare....ero un pò scettico, ma ho pensato di fare comunque una prova e vedere se fossi io quello che si sbagliava.
Ora vedrò come risolvere questa cosa, se troverò una facile soluzione sarò felice di metterla a disposizione anche degli altri utenti...
Magari provo ad evitare i float come dicevi prima.
Devo risolvere al più presto questa grana altrimenti devo reimpostare il tutto.
Certo, il problema dell'allineamento verticale mi sembra quasi assurdo se si pensa alle potenzialità dei css...
Spero di postare la soluzione il prima possibile.
Comunque grazie.

Discussione: centratura verticale img in div 100%

Strumenti discussione

Ricerca discussione

Visualizza

centratura verticale img in div 100%

Permessi di invio