Visualizzazione dei risultati da 1 a 5 su 5
  1. #1

    Allineare testo ed immagine in due colonne differenti

    Ciao a Tutti,

    una domandina semplice per voi.

    All'interno del blog, ho suddiviso la pagina in due colonne (asimmetriche) per mostrare i prodotti affiliati in stile catalogo. Nella colonna di sx l'immagine prodotto, in quella di dx, la descrizione.

    Vorrei capire come allineare (centrare) verticalmente sia il testo che l'immagine. L'immagine mi sembra di averla centrata (aligncenter, sempre che sia il modo corretto), mentre per il testo in colonna, non ci sono riuscito.

    Questo il codice attualmente in uso.


    <p>[one_third]<img class="aligncenter wp-image-3009 size-full" src="http://blablabla.com/wp-content/uploads/2015/02/olio-di-cocco.jpg" alt="" width="200" height="197" />[/one_third] </p>
    <p>[two_third_last]<strong>Olio di cocco<br /></strong></p>
    <p>Testo descrizione prodotto.</p>
    <p>[button-red url="http://www.blablabla.it/prodotti/__olio-di-cocco-vergine-300-g.php" target="_blank" position="left"]Acquista il prodotto[/button-red][/two_third_last]</p>


    Grazie.

  2. #2
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Ciao.
    Difficile detta così capire cosa vuoi ottenere. E quella sola parte di codice non permette di comprendere cosa già hai costruito. E' necessario mostrare la pagina (o una sua versione ridotta che riproduca le due colonne col testo e le immagini) all'opera, o in alternativa indicare il codice html e css della sezione interessata perché ti si possa dare aiuto

  3. #3
    Ciao grazie per la risposta e perdona la poca chiarezza.

    Ti allego due screenshot, in cui o il testo è poco o è troppo. In questi due casi, vorrei che il testo nella colonna di destra fosse allineato all'immagine a sinistra. E viceversa. Cioè, che entrambi avessero l'allineamento verticale al centro.

    Schermata 2015-02-12 alle 18.45.08.jpg

    Schermata 2015-02-12 alle 18.45.08.jpgSchermata 2015-02-12 alle 18.43.51.jpg

  4. #4
    Utente di HTML.it L'avatar di Prill
    Registrato dal
    Oct 2006
    Messaggi
    2,947
    Avendo una serie di prodotti è il caso in cui una tabella andrebbe bene. Usando i div una possibile soluzione è questa:

    codice:
    <style type="text/css">
    <!--
    #articoli {
        display:table;
    }
    #articoli .row{
        display: table-row;
    }
    #articoli .cell{
        display: table-cell;
        vertical-align:middle;
    }
    -->
    </style>
    </head>
    
    <body>
    <div id="articoli">
     <div class="row">
      <div class="cell">testo</div>
      <div class="cell">immagine</div>
     </div>
     <div class="row">
      <div class="cell">testo</div>
      <div class="cell">immagine</div>
        </div>
    </div>
    sono da regolare le dimensioni dei div e impostare eventuali padding

  5. #5
    Grazie, ma essendo tecnicamente una vera capra, saresti così gentile da dirmi dove inserire le dimensioni del div? E del padding?

    Considera che lo spazio disponibile dovrebbe essere ripartito in 1/3 dello spazio per la colonna sinistra (immagine) e 2/3 per il testo.

    Grazie.

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 © 2025 vBulletin Solutions, Inc. All rights reserved.