Allinemanto verticale centrato div concatenati

**ertos** · 01-05-2014, 20:57

Ciao ragzzi ho un problema che non riesco a risolvere
Ho una pagina html ed a un certo punto ho un
- DIV A (Contenitore) che ha al suo interno altri 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

Come posso fare, ho provato cosi ma non ci riesco

codice HTML:

.div_a{
     position:relative;
}
.div_b {
    float:left;
    width: 20%;
    position:absolute;
    vertical-align: middle;
    }
.div_c {
    width: 60%;
    float:left;
}
.div_d {
    width: 20%;
    float:left;
}

L'immagine non viene allineata, inoltre i div non sono posizionati con float:left. invece lo devono essere.

Ho allegato un immagine per far capire
Fatemi sapere grazie

**shane007** · 01-05-2014, 22:51

Allineare un immagine al centro dello schermo è spesso "tricky" per dirlo all'americana:
Io ho fatto così: http://codepen.io/shane007/pen/bItiD

Se non capisci come funziona chiedi pure...

PS: fai qualche prova su codepen! Io lo trovo molto utile per capire

codice HTML:

<body>    <div class="a">        <div class="b">            <div class="center">                <img src="http://www.lecconotizie.com/wp-content/uploads/2013/03/gatti-milano.jpg" alt="" />            </div>        </div>        <div class="c">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima, quos, odit, iste recusandae neque in architecto quibusdam praesentium porro sapiente pariatur nam nihil ab amet facere quas sint libero inventore excepturi nesciunt quod soluta omnis labore alias eos dolor eum ratione illo assumenda?</div>        <div class="d">Placeat, iusto, excepturi, vitae soluta quam molestias sed neque quisquam nemo ullam labore mollitia ipsa facere distinctio itaque culpa unde suscipit sapiente doloribus minus aspernatur ea possimus tempora harum dignissimos. Eum, doloremque, fuga neque explicabo sint suscipit dolorem accusantium voluptatum deleniti necessitatibus quia excepturi.</div>    </div></body>

codice:

body {
    height: 100%;
    background: yellow;
}
.b,
.c,
.d {
    min-width: 100px;
}
.b {
    width: 25%;
    position: relative;
    background: green;
    float: left;
    display: table;
    height: 100vh;
}
.d {
    background: blue;
    width: 25%;
    float: left;
}
.c {
    background: red;
    width: 50%;
    float: left;
}
.center {
    display: inline;
    vertical-align: middle;
    display: table-cell;   


}
img {
    height: 50px;
    width: 100px;
}

**ertos** · 03-05-2014, 11:47

Grazie per la risposta, ma scusa non capisco.
Io ho allegato un immagine per spiegare l'esempio.
io non conosco l'altezza dei seguenti div in quanto vengono creati dinamicamente da alcune query, quindi nel div b

.b {
width: 25%;
position: relative;
background: green;
float: left;
display: table;
height: 100vh;
}

lo style height: 100 vh non ci deve essere

Come posso fare?

**shane007** · 03-05-2014, 12:23

Con un codice jquery utilizzando il metodo .css. Se non sbaglio dovrebbe essere così:
$('.b').css("height",variabile_che_contiene_l'altezza);

**ertos** · 03-05-2014, 12:44

E come si fa? Cè qualche tutorial? Non capisco

**shane007** · 03-05-2014, 12:46

Non hai mai programmato jQuery o almeno javascript?

**ertos** · 03-05-2014, 12:53

No, di solito guardo dei tutorial o script e li adatto alle pagine, pero non conosceo questo script di allinemaneto immagini

**shane007** · 03-05-2014, 15:13

Ah ok... Potresti spiegare più precisamente quello che stai cercando di fare?

L'altezza dei div varia inquanto all'interno vi sono delle query php.

Queste query php cosa fanno? Cosa ti restituiscono?

**ertos** · 03-05-2014, 15:40

Grazie per le risposte, ma nell'immagine che ho allegato ho scritto tutto.

Allora lo rispiego
HO UN DIV A (contenitore) dove al suo interno ci devono essere:
1 - Immagine a sinistra
2 - Testo dell'immagine
3 - Altro testo

Io vorrei che l'immagine e sinistra sia allineata verticalmente al centro rispetto al testo

Spero avete capito

**shane007** · 03-05-2014, 16:31

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?

Discussione: Allinemanto verticale centrato div concatenati

Strumenti discussione

Ricerca discussione

Visualizza

Allinemanto verticale centrato div concatenati

Permessi di invio