Visualizzazione dei risultati da 1 a 7 su 7
  1. #1
    Utente di HTML.it L'avatar di mexican
    Registrato dal
    Oct 2001
    residenza
    cava de tirreni
    Messaggi
    3,541

    Immagine allineata centralmente in verticale

    Ciao a tutti vorrei sapere come poter allineare un immagine in un div verticalmente al centro.
    Ecco il mio codice:

    codice:
    <div class="bordo1V">[img]logo.jpg[/img]</div>
    CSS
    codice:
    .bordo1V{
    	border:1px solid #77AC1A;	
    	height:110px;
    	padding:5px;
    	margin:5px;
    	width:110px;
    	float:left;
    	vertical-align:middle;
    	}
    .bordo1V img{
    	vertical-align:middle;
    		}	
    .bordo1V a{
    	vertical-align:middle;
    		}
    Le immagini mi risultano sempre allineate in alto perchè?

  2. #2
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Il vertical-align funziona solo nelle tabelle ed oggetti assimilati.
    Per centrare in verticale occorre usare i posizionamenti assoluti.

    Immagino che conosci la dimensione dell'immagine (nei miei conti la chiamo XXX e YYY), quindi quello che devi fare e`:
    codice:
    .bordo1V{
    	border:1px solid #77AC1A;	
    	height:110px;
    	padding:5px;
    	margin:5px;
    	width:110px;
    	float:left;
    	position: relative;
    }
    .bordo1V a{
    	position: absolute;
    	width: XXXpx;
    	height: YYYpx;
    	left: 0; /* immagino che riempia tutto */
    	top: 50%;
    	margin-top: -ZZZpx;
    }
    .bordo1V img{
    	/* non dovrebbe serivre niente, qui */
    }
    dove ZZZ e` la meta` di YYY (nota che c'e` un meno prima del ZZZ)
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  3. #3
    Utente di HTML.it L'avatar di mexican
    Registrato dal
    Oct 2001
    residenza
    cava de tirreni
    Messaggi
    3,541
    Originariamente inviato da Mich_
    Il vertical-align funziona solo nelle tabelle ed oggetti assimilati.
    Per centrare in verticale occorre usare i posizionamenti assoluti.

    Immagino che conosci la dimensione dell'immagine (nei miei conti la chiamo XXX e YYY), quindi quello che devi fare e`:
    codice:
    .bordo1V{
    	border:1px solid #77AC1A;	
    	height:110px;
    	padding:5px;
    	margin:5px;
    	width:110px;
    	float:left;
    	position: relative;
    }
    .bordo1V a{
    	position: absolute;
    	width: XXXpx;
    	height: YYYpx;
    	left: 0; /* immagino che riempia tutto */
    	top: 50%;
    	margin-top: -ZZZpx;
    }
    .bordo1V img{
    	/* non dovrebbe serivre niente, qui */
    }
    dove ZZZ e` la meta` di YYY (nota che c'e` un meno prima del ZZZ)
    Purtroppo non conosco la dimensione dell'immagine. Sono dinamiche e faccio un resize automatico al loro upload, so solo che possono essere massimo 100x100 ma anche più piccole.

  4. #4
    Utente di HTML.it
    Registrato dal
    Sep 2001
    Messaggi
    21,188
    Allora si puo` provare con un metodo diverso, che funziona solo se l'oggetto da centrare e` di tipo inline ed e` il solo che viene inserito nel campo.

    codice:
    HTML:
    <div class="bordo1V">
      
    
    
        <a href="pagine_franchisee.aspx" title="pagina">
          [img]logo.jpg[/img]
        </a>
      
    
    
    </div>
    
    
    CSS:
    .bordo1V{
    	border:1px solid #77AC1A;	
    	height:110px;
    	padding:5px;
    	margin:5px;
    	width:110px;
    	float:left;
    }
    .bordo1V p{
    	width: 100%;
    	height: 100%;
    	line-height: 100%;
    	text-aligh: center;
    }
    .bordo1V a{
    	/* non dovrebbe servire niente, qui */
    }
    .bordo1V img{
    	/* non dovrebbe servire niente, qui salvo se l'immagine puo` essere piu` grande dello spazio*/
    }
    Nuova politica di maggiore severita` sui titoli delle discussioni: (ri)leggete il regolamento
    No domande tecniche in messaggi privati

  5. #5
    Utente di HTML.it L'avatar di mexican
    Registrato dal
    Oct 2001
    residenza
    cava de tirreni
    Messaggi
    3,541
    Purtroppo niente ancora!!!
    ti mostro il link così ti rendi conto
    http://www.ilnegoziodelfranchising.com/index.aspx

    Devo allineare in verticale tutti quei loghi!!!

  6. #6
    sto per andare a dormire che sono molto stanco
    però intanto puoi dare uno sgardo al mio esempio
    http://www.colonnello.net/nuovo/html/prova/center/
    magari ti aiuta

  7. #7
    Utente di HTML.it L'avatar di mexican
    Registrato dal
    Oct 2001
    residenza
    cava de tirreni
    Messaggi
    3,541
    Originariamente inviato da mucu
    sto per andare a dormire che sono molto stanco
    però intanto puoi dare uno sgardo al mio esempio
    http://www.colonnello.net/nuovo/html/prova/center/
    magari ti aiuta
    ok provo nel pom grazie.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2026 vBulletin Solutions, Inc. All rights reserved.