Centrare verticalmente due div

**src2** · 19-12-2016, 13:27

Buongiorno a tutti,
da alcuni giorni ho questo problema che mi perseguita: devo centrare verticalmente due div che contengono rispettivamente un immagine e di fianco una descrizione.
Oggi sono arrivato a risolvere solo una parte del mio problema: sono riuscito a centrare immagine e testo ma se il testo è troppo lungo mi va a capo sotto l'immagine tutto il div del testo cosa che non voglio che accada; se invece mando a capo il contenuto del div descrizione con un semplice <br> tutto si sistema (ma non risolve il mio problema per il semplice fatto che il sito dovrà essere responsive).

Vi allego qui sotto un immagine per rendere meglio l'idea: (ogni quadrato è un div)
IMG_20161219_121903.jpg

spero di essere stato abbastanza chiaro sul risultato che voglio ottenere.

**Vincent.Zeno** · 19-12-2016, 14:09

ragionando in termini responsivi devi trovare un compromesso tra quello che vuoi e quello che puoi

facci vedere un po' di codice

**src2** · 19-12-2016, 15:32

codice:

<html>
<head>
</head>
<style>
.vcenter {
    display: inline-block;
    vertical-align: middle;
    float: none;
//word-wrap: break-word;
}
</style>
<body>
<div>
    <div class="vcenter">
        <div><img src="cerchio1.png" class="vcenter"></div>
    </div>
    <div class="vcenter">
        <div>
        Sviluppo e realizzazione di più di 12000 impianti elettrici di vario genere e grandezza<br> con la capacità di rispondere in maniera ottimale e con rapidità alle esigenze dei nostri clienti, 
        sia dal punto di vista produttivo che economico.
        </div>
    </div>
</div>
<div style="clear:both;"></div>
</body>
</html>

speravo in una risposta che non mi portasse ad un compromesso

Immagine.jpg

Questa è un immagine del sito, come potete vedere non rende se la descrizione non è al centro e se la cosa resta fissa se viene visualizzata in una risoluzione differente svanisce l'effetto.

**src2** · 19-12-2016, 17:01

codice:

#main {
  width:500px;
  margin:0 auto;
  border:1px solid blue;
}
#main > div {/* Float wrappers */
  display: inline-block;
  vertical-align: middle;
  width:50%;
}
.float-left {
  float: left;
}
.float-right {
  float: right;
}

codice HTML:

<div id="main">
  <div>
    <div class="float-left">
      <p>AAA</p>
    </div>
  </div><div>
    <div class="float-right">
      <p>BBB</p>
      <p>BBB</p>
    </div>
  </div>
</div>

Non chiedetemi come ma mi sono trovato la soluzione da solo :')

**Vincent.Zeno** · 19-12-2016, 17:03

ricorda di usare sempre il tag CODE per postare codice sul forum, vedi tasto # in modalità avanzata

l'immagine che hai allegato non corrisponde al codice postato: sii più univoco (da qui le tue intenzioni, o quello che dai per scontato, non si possono immaginare)

**Vincent.Zeno** · 19-12-2016, 17:04

ah ok, ora provo

attento anche alla posizione del tag style

**Vincent.Zeno** · 19-12-2016, 17:08

uhm... no: non si capisce la relazione del codice postato con l'allegato

**src2** · 19-12-2016, 17:53

infatti l'ultimo codice non ha nessun riferimento con il sito che sto realizzando. L'esempio è ciò che mi ha dato la soluzione dal seguente sito:

http://stackoverflow.com/questions/1...nknown-heights

Questo è il codice del mio sito:

codice:

<html>
<head></head>
<style>
.main {
  margin: 0 auto;
}
.main > div { /* Float wrappers */
  display: inline-block;
  vertical-align: middle;
  width: 50%;
  align:center;
}
.float-img {
  float: left;
  align:center;
}
.float-desc {
  float: left;
  text-align=justify;
}
</style>
<body>
<div class="main">
  <div>
    <div class="float-left">
      <img src="cerchio1.png">
    </div>
  </div><div >
    <div class="float-right">
      Sviluppo e realizzazione di più di 12000 impianti elettrici di vario genere e grandezza con la capacità di rispondere in maniera ottimale e con rapidità alle esigenze dei nostri clienti, 
      sia dal punto di vista produttivo che economico.
    </div>
  </div>
</div>
<div style="clear:both;"></div>
</body>
</html>

Di seguito allego immagine con il mio risultato:

Immagine.jpg

**Vincent.Zeno** · 19-12-2016, 18:50

per semplificare puoi mettere online una pagina demo, che ti si aiuta meglio?

Discussione: Centrare verticalmente due div

Strumenti discussione

Ricerca discussione

Visualizza

Centrare verticalmente due div

Permessi di invio