Centrare immagini e testo in HTML

html news

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.


Guida HTML

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>


 

Guida 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>

 

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>

 

We use cookies

Utilizziamo i cookie sul nostro sito Web. Alcuni di essi sono essenziali per il funzionamento del sito, mentre altri ci aiutano a migliorare questo sito e l'esperienza dell'utente (cookie di tracciamento). Puoi decidere tu stesso se consentire o meno i cookie. Ti preghiamo di notare che se li rifiuti, potresti non essere in grado di utilizzare tutte le funzionalità del sito.