Allinemanto verticale centrato div concatenati

**MAeSI** · 30-05-2014, 18:11

Ammesso che il div_d sia sempre il più alto, prova così

codice:

$(window).on('load', function () {
    var c = $(".div_c").height();
    var d = $(".div_d").height();
    var i = $(".div_b img").height();
    $(".div_b").height(d);
    $(".div_b img").css('margin-top', -i / 2 + "px");
    $(".div_c").css('margin-top', (d - c) / 2 + "px");
});

**ertos** · 30-05-2014, 19:22

Beh allora ti spiego,
- il div b contiene un immagine con un altezza fissa 300 px
- il div c contiene un testo dinamico quindi non conosco l'altezza
- il div d contiene un immagine di altezza 200 px (questo deve stare il alto quindi non ha importanza)

Io vorrei che l'immagine a sinistra sia allineata verticalmente la centro rispetto al testo.

Il codice non va, infatti quanto l'altezza del testo è minore dell'altezza immagine allora l'immagine non è allineata

**Prill** · 30-05-2014, 20:08

all'inizio ti avevano suggerito il display:table e display:table-cell.
Con questi non hai bisogno di javascript:

codice:

<style type="text/css">
<!--
#wrapper {
    display:table;
    width:100%;
}
         
#content {
    display:table-row;
}
         
#bi, #ci, #di {
    display:table-cell;
    vertical-align:middle;
    height:500px; /* inserito solo per visualizzare meglio l'esempio */
}
         
#bi, #di {
    width:20%;
    background-color:#0066FF
}
         
#ci {
    width:60%;
     background-color:#339933
}
-->
</style></head>

<body>
    <div id="wrapper">
        <div id="content">
            <div id="bi">
                contenuto bi
            </div>
            <div id="ci">
                contenuto ci
            </div>
            <div id="di">
                contenuto di
            </div>
        </div>
    </div>
</body>
</html>

dove l'allineamento verticale non deve essere centrato inserirai un vertical-align:top.
L'altezza delle celle si adatterà al contenuto più "alto" e l'immagine o il testo più "basso" saranno centrati

**ertos** · 30-05-2014, 20:29

Ma il problema è questo, io non conosco l'altezza, puo essere 500 ma puo anche essere 1000 px o 200 px, il testo è dinamico viene preso dal database non posso conoscere l'altezza.

Originariamente inviata da Prill

all'inizio ti avevano suggerito il display:table e display:table-cell.
Con questi non hai bisogno di javascript:

codice:

<style type="text/css">
<!--
#wrapper {
    display:table;
    width:100%;
}
         
#content {
    display:table-row;
}
         
#bi, #ci, #di {
    display:table-cell;
    vertical-align:middle;
    height:500px; /* inserito solo per visualizzare meglio l'esempio */
}
         
#bi, #di {
    width:20%;
    background-color:#0066FF
}
         
#ci {
    width:60%;
     background-color:#339933
}
-->
</style></head>

<body>
    <div id="wrapper">
        <div id="content">
            <div id="bi">
                contenuto bi
            </div>
            <div id="ci">
                contenuto ci
            </div>
            <div id="di">
                contenuto di
            </div>
        </div>
    </div>
</body>
</html>

dove l'allineamento verticale non deve essere centrato inserirai un vertical-align:top.
L'altezza delle celle si adatterà al contenuto più "alto" e l'immagine o il testo più "basso" saranno centrati

**Prill** · 30-05-2014, 20:33

l'altezza l'ho inserita solo per fare estendere i div, non avendo contenuti, e affinché l'esempio fosse visualizzato meglio. Copia e incolla il codice, togli l'altezza e riempi i tuoi div, vedrai che tutti assumeranno la stessa altezza e i contenuti saranno centrati, esattamente come avviene in una tabella

**ertos** · 31-05-2014, 15:12

Il tuo codice funziona in una pagina bianca, ma se lo inserisco nella mia pagina web non funziona come mai?

CI potrebbere essere altri riferimenti all'interno del css che entrano in contrasto?

Fammi sapere grazie

**Prill** · 31-05-2014, 20:43

via i float ai div che hanno display:table-cell, via il float anche all'immagine del div sinistro, controlla poi anche i padding sui tre div mi pare che da qualche parte ci sia un padding-top di 30px e uno inferiore di 15 (il che già sposta l'elemento di 15px rispetto al centro)

Discussione: Allinemanto verticale centrato div concatenati

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio