 |
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'immagineSi 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 soluzionePer 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 testoIn 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 soluzionePer 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>
Un'altra soluzione per il Vertical Align
Ecco un'altra soluzione veloce per avere una icona sulla sinistra e sulla destra del testo centrato verticalmente rispetto all'icona.
<div style="valign:middle">
<img src="/./laMiaImmagine.png" style="vertical-align: middle"/>
<span style="vertical-align: middle">TESTO CENTRATO RISPETTO ALL'IMMAGINE</span>
</div>