Allinemanto verticale centrato div concatenati

**MAeSI** · 03-05-2014, 23:07

Originariamente inviata da ertos

[...] 3 div B-C-D che sono allineati in orizzontale a sinistra
L'altezza dei div varia inquanto all'interno vi sono delle query php.
Nel DIV B vi è un immagine, io vorrei che questa immagine sia allineata centrale in verticale rispetto a tutto il DIV a

Ciao, in alternativa all'esempio di shane007, anche se questa risposta è fuori tema rispetto alla sezione e visto che è stato nominato jQuery, prova a vedere questo esempio.

Approfittiamo (siamo in due

), visto che è in nostro primo post, per salutare il forum.

**ertos** · 04-05-2014, 16:31

Veramente non va proprio, guarda qui
http://robertotaormina.com/test.html

**ertos** · 04-05-2014, 16:33

Non va prorpio guarda qui
http://robertotaormina.com/test.html

Originariamente inviata da shane007

Allora io farei un div contenitore con all'interno 2 div: uno per l'immagine ed il suo testo ed un altro per il testo a parte.
http://codepen.io/shane007/pen/mqxAp

codice HTML:

<body>    <div class="a">        <div class="b">
            <img src="http://www.lecconotizie.com/wp-content/uploads/2013/03/gatti-milano.jpg" alt="" />BALBALBA TESTO DA CENTRARE
        </div>        <div class="d">BALBALBA testo a parte</div>
</body>

codice:

.b,
.d {
    min-width: 100px;
}
.b {
    width: 75%;
    position: relative;
    background: green;
    float: left;
    display: flex;
    align-items: center;
}
.d {
    background: blue;
    width: 25%;
    float: left;
}
img {
    flex: none;
    width: 128px;
    height: 128px;
    margin-right:20px;
}

Così va bene?

**ertos** · 04-05-2014, 16:40

Grazie per la risposta e benvenuto nel forum ma l'esempio non va proprio.

Ho fatto untest qui e non va

http://robertotaormina.com/test2.html

Come puoi vedere l'immagine è posizionata in alto e non al centro rispetto al testo centrale

Originariamente inviata da MAeSI

Ciao, in alternativa all'esempio di shane007, anche se questa risposta è fuori tema rispetto alla sezione e visto che è stato nominato jQuery, prova a vedere questo esempio.

Approfittiamo (siamo in due

), visto che è in nostro primo post, per salutare il forum.

**MAeSI** · 04-05-2014, 17:25

Ciao, hai dimenticato di inserire la libreria jQuery, esempio:

codice HTML:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

**shane007** · 04-05-2014, 18:46

Originariamente inviata da ertos

Veramente non va proprio, guarda qui
http://robertotaormina.com/test.html

Non va perché hai messo il tag prima del <img>
Se sposti il tag da prima a dopo l'immagine vedrai che funziona !

PS: io cercherei di limitare l'uso del JS il più possibile perché qualcuno potrebbe averlo disattivato o addirittura qulache vecchio cell non lo supporta.

**ertos** · 06-05-2014, 09:25

OK adesso funziona,
Grazie Maesi

Originariamente inviata da MAeSI

Ciao, hai dimenticato di inserire la libreria jQuery, esempio:

codice HTML:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

**ertos** · 06-05-2014, 09:28

Scusa ho provato a spostate il ma non ma, guarda illink che ho postato
Come posso fare?

Originariamente inviata da shane007

Non va perché hai messo il tag prima del <img>
Se sposti il tag da prima a dopo l'immagine vedrai che funziona !

PS: io cercherei di limitare l'uso del JS il più possibile perché qualcuno potrebbe averlo disattivato o addirittura qulache vecchio cell non lo supporta.

**MAeSI** · 06-05-2014, 23:42

Originariamente inviata da ertos

OK adesso funziona,
Grazie Maesi

Ciao,

abbiamo aggiornato il codice precedentemente linkato perché, se non si dichiara almeno l'attributo height nel tag img, l'immagine non viene posizionata in modo corretto al primo caricamento.

**ertos** · 30-05-2014, 17:43

Scusate se apro la discussione, lo script funziona pero come posso allineare anche il testo (DIV C) in verticale, io vorrei che sia l'immagine a sinistra sia il testo sono allineati al centro in verticale. Grazie

Discussione: Allinemanto verticale centrato div concatenati

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio