Visualizzazione dei risultati da 1 a 5 su 5
  1. #1
    Utente di HTML.it
    Registrato dal
    May 2007
    Messaggi
    248

    Centrare un Immagine in un div

    salve, ho letto vari consigli su come centrare in verticale un'immagine in un div.

    Per la precisione ho il div come intestazione, al cui interno a sx ho la scritta ed a dx ho un link con l'immagine.

    Ho dovuto trasformare il blocco in inLine altrimenti andava a capo e tutto funziona bene.

    Ho visto che l'immagine parte dall'alto e non ho trovato alcuna soluzione se non il padding-topo per spostare l'immagine verso il basso e farla risultare centrata.

    La soluzione c'è stat, ma non mi sembra corretta.

    Qualcuno mi può dare indicazioni?

    Ho letto che si può trattare come se fosse una tabella, ma non posso usare il block altrimenti va a capo
    grazie

    Gaetano

  2. #2
    Io non avrei trasformato l'immagine in inline avrei:
    [list=1][*]Lasciato le proprietà originali agli oggetti.[*]Usato il float.[*]Usato i margini negativi per centrarla.[*]Fatto un bel clearing.[/list=1]
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  3. #3
    Utente di HTML.it
    Registrato dal
    May 2007
    Messaggi
    248
    sono d'accordo, ma non so come fare.

    Ho usato il float e lasciato l'immagine con le misure originali.

    E siccome non mi piaceva l'immagine con sopra nessuno spazio e sotto parecchio, ho usato il padding per farla scendere.

  4. #4
    Posta il codice dell'intestazione css e Html con le misure

    p.s. Usa i tag [ code]......[/code]
    “Che le cose siano cosi, non vuol dire che debbano andare così. Solo che quando si tratta di rimboccarsi le maniche e incominciare a cambiare, vi è un prezzo da pagare. Ed è allora che la stragrande maggioranza preferisce lamentarsi più che fare”.

    Giovanni Falcone

  5. #5
    Utente di HTML.it
    Registrato dal
    May 2007
    Messaggi
    248
    Il codice html è questo:
    codice:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
     "http://www.w3.org/TR/html4/loose.dtd">
     <html>
     <head>
    	
        
    	<link rel="stylesheet" type="text/css" href="Base.css" />
    	
    	<title>Software G&L</title>
     </head>
     
     
     <body>
    	<div id="Raggruppa">
     		<div id="Intestazione">
    			<h1> Gestione</h1>
    			 [img]Img/Logo.png[/img] 
    		</div>
    
    		<div id="Contenitore">
    
    		<div id="Piede">
    			Software  Copyright ©  [P.iva ]    info@.it    tel/fax 
    		</div>
    	</div>
     </body>
     </html>
    Il codice css:
    codice:
    html, body  {
    	text-align: center;
    	padding: 0.5%;
    	background-color: #EEE;
    }
    
    img { border:none }
    
    
    #Raggruppa{
    	margin:auto;
    	height: 100%;
    	font: normal 10px "Verdana" ;
    	background-color: green;
    	color: green;
    	border: 1px solid #777;
    }
    
    	#Intestazione{
    		width: 99.7%;
    		padding: 1px;
    		vertical-align: middle;
    		border: ridge green;
    	}
    		#Intestazione h1{
    			display: inline;
    			text-align: left;
    			color: blue;
    			font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    			font-size: 400%;
    			font-style: oblique;
    			margin-left: -60%;
    		}
    		#Intestazione a{
    			display: inline;
    		}
    		#Intestazione img{
    			float: right;
    			padding-top: .4%;
    			padding-right: 1%;
    			margin: 0px auto;
    			vertical-align: baseline;
    		}
    
    
    	#Contenitore{
    		width: 98%;
    		background-color: yellow;
    		vertical-align: middle;
    		padding: 1%;
    	}
    
    
    
    #Piede{
    	clear: both;
    	text-align: right;
    	background-color: orange;
    	color: black;
    	font-size: 12px;
    }

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 © 2025 vBulletin Solutions, Inc. All rights reserved.