12print.it
Digitalpix.it
|
Centrare immagini e testo in HTML
|
|
|
|
Manuali - Programmazione - HTML
|
|
IL PROBLEMA
In questa breve guida si vuole mostrare come centrare una immagine o del testo all'interno di un componente HTML.
In particolare si vorrà centrare, sia in verticale che in orizzontale, una immagine all'interno di un DIV in una data pagina HTML (la soluzione
può andar bene anche per centrare componenti HTML generici).
E poi si vorrà centrare, in verticale, del testo rispetto ad una immagine.
|
|
|
Il problema dell'immagine
Si vuole mostrare una immagine centrata, sia in verticale che in orizzontale, all'interno di un DIV in una data pagina HTML (la soluzione può andar bene anche
per centrare componenti HTML generici).
La soluzione
Per fare questo bisogna usare una combinazione di DIV, SPAN e IMG STYLE in maniera appropriata.
La soluzione sembrerebbe banale ma non lo è a causa di una serie di BUG HTML.
La soluzione è stata testata con vari browser IE6, IE7, FireFox 2 e 3, Opera 9.51.
|
Codice di esempio
<html>
<head>
<style type="text/css">
/* center the picture, unknown height within a magic div of 300 px */
div.magic_container {
display: table-cell;
position:static;
BORDER-RIGHT: #cbcbcb 1px solid;
BORDER-TOP: #cbcbcb 1px solid;
BORDER-LEFT: #cbcbcb 1px solid;
BORDER-BOTTOM: #cbcbcb 1px solid;
MARGIN-RIGHT: 10px;
HEIGHT: 175px;
BACKGROUND-COLOR: #f7f7f7;
TEXT-ALIGN: center;
overflow:hidden;
vertical-align: middle;
}
div.magic_container img {
margin:0 auto;
border:1px solid #aaa;
}
#inner_span_1 {
width: 0;
height: 100%;
display: inline-block;
vertical-align: middle;
}
#inner_span_2 {
text-align: center;
width: 100%;
display: inline-block;
vertical-align:middle;
}
</style>
</head>
<body>
<div class="magic_container"><span id="inner_span_1"></span>
<span id="inner_span_2">
<img src="immagine da mostrare" border=0 />
</span>
</div>
</body>
</html>
|
|
Il problema del testo
In questo caso si vuole inserire una immagine in una pagina HTML e si vuole che il testo di fianco sia centrato verticalmente rispetto all'ìimmagine
stessa.
La soluzione
Per fare questo bisogna usare una semplice propietà CSS, il vertical-align.
La soluzione è stata testata con vari browser IE7, FireFox 3.0.5, Opera 9.63 e Chrome 1.0.154.43.
|
Codice di esempio
<html>
<head>
<style type="text/css">
.testmiddle {vertical-align:middle}
</style>
</head>
<body>
<p>
Immagine
<img class="testmiddle" border="0"
src="logocss.gif" width="95" height="84" />
al centro del testo.
</p>
</body>
</html>
|
Altri Articoli :
» Canon 1D Mark IV: Analisi
Come viene presentata dal sito ufficiale Canon.it la nuova Canon EOS 1D Mark IV: "Leader per risoluzione e velocità, EOS-1D Mark IV, cattura lo straordinario. Riprendi
l'azione con 16,1 megapixel a 10 fps o con video Full HD. EOS-1D Mark IV è pronta all’azione." AGGIORNAMENTI21/11/2009:...
» Nuovo obiettivo Tamron 17-50mm f/2.8 Stabilizzato
Obiettivo Tamron SP AF17-50mm F/2.8 XR Di-II VC LD Aspherical (IF)Ecco il nuovo obiettivo Tamron che come al solito ha un nome veramente assurdo. Tamron ha aggiornato il
suo famoso obiettivo 17-50mm f/2.8 aggiungendoci lo stabilizzatore ottico.Dal nome dell'obiettivo si evince la presenza dello...
» Java e il problema dell'encoding dei caratteri
Java e il problema dell'encoding dei caratteriOggi voglio trattare un problema abbastanza vasto sull'encoding dei programmi in java. In generale la codifica più utilizzata
è la UTF-8 che comprende un range vastissimo di caratteri che non dovrebbe creare problemi per nessuna lingua. Utilizzare...
» Nuovi link: Software
Nuovi link: SoftwareAggiornata la pagina dei link per la categoria Software.Questa categoria contiene i link ai migliori software gratuiti (freeware, open-source,...) per
sistemi operativi Microsoft.Ho aggiunto il link all'ottimo software Defraggler. Questo software, semplice ed intuitivo, si...
» Nuove Canon DSLR
Nuove Reflex CanonMolte sono le notizie che vorrebbero la presentazione delle nuove 60D / 7D per il prossimo 19 Agosto o per il 25 Agosto.Sarà vero? Staremo a vedere!!!
|
