Pagina 1 di 3 1 2 3 ultimoultimo
Visualizzazione dei risultati da 1 a 10 su 27
  1. #1
    Utente di HTML.it L'avatar di ertos
    Registrato dal
    Nov 2005
    Messaggi
    448

    Allinemanto verticale centrato div concatenati

    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
    Immagini allegate Immagini allegate

  2. #2
    Utente di HTML.it L'avatar di shane007
    Registrato dal
    Jun 2011
    residenza
    Trentino, tra vacche ed aria buona.
    Messaggi
    55
    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;
    }

  3. #3
    Utente di HTML.it L'avatar di ertos
    Registrato dal
    Nov 2005
    Messaggi
    448
    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?

  4. #4
    Utente di HTML.it L'avatar di shane007
    Registrato dal
    Jun 2011
    residenza
    Trentino, tra vacche ed aria buona.
    Messaggi
    55
    Con un codice jquery utilizzando il metodo .css. Se non sbaglio dovrebbe essere così:
    $('.b').css("height",variabile_che_contiene_l'altezza);
    Siamo nel 2014, ci sono tante belle cose come Google, CodePen, Stackoverflow, ecc. Perché non usare?

  5. #5
    Utente di HTML.it L'avatar di ertos
    Registrato dal
    Nov 2005
    Messaggi
    448
    E come si fa? Cè qualche tutorial? Non capisco

  6. #6
    Utente di HTML.it L'avatar di shane007
    Registrato dal
    Jun 2011
    residenza
    Trentino, tra vacche ed aria buona.
    Messaggi
    55
    Non hai mai programmato jQuery o almeno javascript?
    Siamo nel 2014, ci sono tante belle cose come Google, CodePen, Stackoverflow, ecc. Perché non usare?

  7. #7
    Utente di HTML.it L'avatar di ertos
    Registrato dal
    Nov 2005
    Messaggi
    448
    No, di solito guardo dei tutorial o script e li adatto alle pagine, pero non conosceo questo script di allinemaneto immagini

  8. #8
    Utente di HTML.it L'avatar di shane007
    Registrato dal
    Jun 2011
    residenza
    Trentino, tra vacche ed aria buona.
    Messaggi
    55
    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?
    Siamo nel 2014, ci sono tante belle cose come Google, CodePen, Stackoverflow, ecc. Perché non usare?

  9. #9
    Utente di HTML.it L'avatar di ertos
    Registrato dal
    Nov 2005
    Messaggi
    448
    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

  10. #10
    Utente di HTML.it L'avatar di shane007
    Registrato dal
    Jun 2011
    residenza
    Trentino, tra vacche ed aria buona.
    Messaggi
    55
    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?
    Siamo nel 2014, ci sono tante belle cose come Google, CodePen, Stackoverflow, ecc. Perché non usare?

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.