div affiancati e centrati orizzontalmente

**Phobox** · 29-05-2011, 18:03

Buongiorno a tutti.
Avrei bisogno di un piccolo aiuto riguardo ai CSS.

Ho una pagina in cui visualizzo un'immagine centrata orizzontalmente. A volte però (via php) aggiungo altre due immagini secondarie e relativa descrizione (una alla destra e una alla sinistra di quella principale, sempre e comunque visualizzata).

La mia domanda è: come faccio a centrare tutto quanto tenendo in mente che la dimensione di ogni immagine non è fissa e quindi il blocco div che la contiene (immagine e descrizione) si ridimensiona.

codice:

    <div id="mainWrapper">
        <div id="leftOptionalImage">
            <div class="desc">description</div>
            [img]...[/img]
        </div>
        <div id="mainImageWrapper">
            [img]...[/img]
        </div>
        <div id="rightOptionalImage">
             <div class="desc">description</div>
             [img]...[/img]
        </div>
</div>

**carlomarangoni** · 29-05-2011, 23:33

Prova così

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento senza titolo</title>
<style type="text/css" media="screen">
#mainWrapper {
	clear: both;
	margin: 0 auto;
}
@leftOptionalImage, #mainImageWrapper, #rightOptionalImage {
	float: left;
}
#clear {
	clear: both;
}
</style>
</head>

<body>
<div id="mainWrapper">
        <div id="leftOptionalImage">
            <div class="desc">description</div>
            [img]...[/img]
        </div>
        <div id="mainImageWrapper">
            [img]...[/img]
        </div>
  <div id="rightOptionalImage">
             <div class="desc">description</div>
             [img]...[/img]
        </div>
  <div id="clear"></div>
</div>
</body>
</html>

**Phobox** · 30-05-2011, 11:30

ciao, grazie mille!
le 3 immagini sono affiancate, ora però rimane il problema di centrare orizzontalmente nello schermo.
L'immagine principale dovrebbe essere sempre al centro e, quando visibili, le due secondarie dovrebbero comparire ai lati.

Io ho provato già a centrare <div id="mainWrapper"> però il problema è che questo elemento ha la larghezza della pagina e non dettata dal suo contenuto, quindi non riesco a centrarla con margin: 0 auto;

**ResianTaxidrive** · 30-05-2011, 13:53

ma se aggiungi width:100% al mainWrapper?

**Phobox** · 30-05-2011, 14:24

no nulla...

**carlomarangoni** · 30-05-2011, 14:44

Prova così

codice:

<style type="text/css" media="screen">
#mainWrapper {
	clear: both;
}
@leftOptionalImage, #mainImageWrapper, #rightOptionalImage {
	float: left;
             margin: 0 auto;
}
#clear {
	clear: both;
}
</style>

**Phobox** · 30-05-2011, 15:21

no, non funziona,
l'ho fatto così utilizzando display:inline-block;

codice:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        
        <title>Documento senza titolo</title>
        <style type="text/css" media="screen">

        body{
            margin:0 auto;
            text-align:center;/*IE fix*/
        }
        #mainWrapper{
            clear:both;
            display:inline-block;
        }
        #leftOptionalImage, #mainImageWrapper, #rightOptionalImage {
            float: left;
        }
        #clear {
            clear: both;
        }
        </style>
    </head>

    <body>
        <div id="mainWrapper">
            <div id="leftOptionalImage">
                <div class="desc">description</div>
                    [img]left.png[/img]
            </div>
            <div id="mainImageWrapper">
                [img]center.png[/img]
            </div>
            <div id="rightOptionalImage">
                <div class="desc">description</div>
                     [img]right.png[/img]
            </div>
            <div id="clear"> </div>
        </div>
    </body>
</html>

Discussione: div affiancati e centrati orizzontalmente

Strumenti discussione

Ricerca discussione

Visualizza

div affiancati e centrati orizzontalmente

Permessi di invio