Centrare più div sulla stessa riga

**eliJS** · 16-01-2010, 23:43

Il mio problema è semplice, vorrei che in questa pagina: http://elix14.altervista.org/div.html
le immagini fossero centrate e sulla stessa riga...

Per ora ho lavorato con questo codice:

Codice PHP:


<style type="text/css" title="text/css">

<!--

    .inline

    {

        float: left;

    }

-->

</style>

<div class='container' align='center'>

    <div class='inline img0'>

        <span class='img_info' align='center'>

            [img]esempio1.png[/img]

    


            [b]Prova n 1[/b]

    


            Una prova

        </span>

    </div>



    <div class='inline img1'>

        <span class='img_info' align='center'>

            [img]esempio2.png[/img]

    


            [b]Prova n 2[/b]

    


            Un'altra prova

        </span>

    </div>

</div>

Ho provato a impostare l float su center ma invece che fare quello che volevo io le immagini finivano una sotto l'altra.

Cosa posso fare?

**marco.carrieri** · 17-01-2010, 16:02

Una cosi puo andare bene?

Codice PHP:


<!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" xml:lang="en" lang="en">

    <head>

        <title>Test</title>

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <style type="text/css">

            #contenitore

            {

                font-size:20px;

                font-weight:bold;

                width:400px;

            }

            #box1

            {

                height:50px;

                width:200px;

                background:#ff0000;

                color:#ffffff;

                float:left;    

            }

            #box2

            {

                height:50px;

                width:200px;

                background:#cccccc;

                color:#000000;

                float:left;

            }

        </style>

    </head>

    <body>

        <div align="center">

            <div id="contenitore" align="center">

                <div id="box1">BOX1</div>

                <div id="box2">BOX2</div>

            </div>

        </div>

    </body>

</html>

**eliJS** · 17-01-2010, 20:43

Sì funziona, l'unico problema è che non so la larghezza dei div (so che l'immagine all'interno sarà sempre una 194x194px, ma il testo sotto può cambiare di lunghezza).
Una soluzione potrebbe essere bloccare il div a una certa larghezza e farlo aumentare in altezza, ma come(non sono molto esperto di CSS)? :master: :master:

**eliJS** · 17-01-2010, 21:44

Ho risolto, almeno in parte: dando a ogni div l'attributo "display: table-cell;" l'effetto è quello che cercavo.
L'unico problema è IE che non supporta questa istruzione, vedrò di risolvere girando in rete.

Discussione: Centrare più div sulla stessa riga

Strumenti discussione

Ricerca discussione

Visualizza

Centrare più div sulla stessa riga

Permessi di invio