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>


 

 

Il nostro sito utilizza i cookie

Usando il sito accetti implicitamente il loro uso. Per saperne di piu'

Approvo

Per ulteriori informazioni leggi il seguente articolo Privacy e Cookies