Centrare floating DIV nel loro contenitore

**k.b** · 13-05-2010, 17:26

Dunque ho questa situazione:

codice:

-----------------------------------------------------------
| -------  -------  -------                               |
| |     |  |     |  |     |                               |
| |     |  |     |  |     |                               |
| |     |  |     |  |     |                               |
| -------  -------  -------                               |
-----------------------------------------------------------

e vorrei avere questo risultato

codice:

-----------------------------------------------------------
|              -------  -------  -------                  |
|              |     |  |     |  |     |                  |
|              |     |  |     |  |     |                  |
|              |     |  |     |  |     |                  |
|              -------  -------  -------                  |
-----------------------------------------------------------

Problema: il numero dei div non e' noto a priori quindi non posso ridimensionare il container e usare margin: auto su di esso.
Ora se non fosse come al solito per IE, basterebbe usare display: inline-block invece di float e basterebbe il text-align: center nel container.

C'e' un modo cross-browser per ottenere questo risultato?

**SoulStorm892** · 13-05-2010, 18:54

Un rudimentale JS: Si presuppone che i div all'interno del container siano di larghezza uguale, a questo punto con un veloce calcolo imposti il margine sinistro del primo div ed il gioco è fatto!

Qualcosa del tipo:

codice:

document.getElementById("firstDiv").style.marginLeft = (conteiner_width-content_width*n_div)/2 +"px";

così facendo sottrai dalla lunghezza del container la lunghezza dei singoli div, lo spazio rimasto è l'offset massimo dei tui div e diviso per due è esattamente la metà!

Se poi calcoli i div lato server è ancora più semplice perché imposti direttamente l'attributo style sul tag

La soluzione non sarà elegantissima ma dovrebbe funzionare

**k.b** · 13-05-2010, 19:20

No niente javascript, piuttosto uso una tabella

Comunque si al momento ho risolto calcolando la larghezza in PHP ma volevo una soluzione solo CSS.

**k.b** · 14-05-2010, 13:08

Nessun modo

**k.b** · 15-05-2010, 10:50

Allora forse e' vero che le alternative alle table non sono sempre altrettanto semplici e cross-browser ?

**electric_g** · 15-05-2010, 20:59

Originariamente inviato da k.b
Allora forse e' vero che le alternative alle table non sono sempre altrettanto semplici e cross-browser ?

fcaldera mi ha dato la soluzione al tuo problema 10 minuti dopo che hai postato, ma è troppo timido per rispondere

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">



<head>

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

    <title></title>



    <style>

    .ib_cnt {

        width            : 600px;

        text-align        : center;

        white-space        : nowrap;

        font-family        : Arial;

        font-size        : 0;

        margin            : 10px auto;

        border            : 1px #e8e8e8 solid;

    }

    

    .ib_cnt div {

        width            : 120px;

        white-space        : normal;

        

        font-size        : 14px;

        margin            : 20px 2px;

        border            : 3px #ccc solid;

        

        display            : -moz-inline-box;

        display            : inline-block;

        vertical-align    : middle;



    }

    

    .ib {

        *display        : inline;

        *zoom            : 1;    

    }

    </style>

    



</head>

<body>



    

    <div class="ib_cnt">

        <div style="width:40%; margin: 30px 0;">

            



            Ecco diversi motivi per non usare le tabelle per il layout

            </p>

        </div>

    </div>

    

    <div class="ib_cnt">

        <div>Introducono codice ridondante</div>

        <div>Mischiano semantica e presentazione</div>

        <div>Non consentono layout complessi</div>

        <div>Rallentano la visualizzazione della pagina</div>

    </div>





</body>

</html>

**k.b** · 15-05-2010, 21:29

Grazie, lo testo appena passo su una macchina windows

Usare hack che fanno fallire il validator CSS e' inevitabile?

Discussione: Centrare floating DIV nel loro contenitore

Strumenti discussione

Ricerca discussione

Visualizza

Centrare floating DIV nel loro contenitore

Permessi di invio