Posizionare due div al centro orizzontale

[wbcreator]

Salve,
Dopo estenuanti ripensamenti sono giunto qui per discutere di una possibile soluzione:

Ho un div container, al suo interno ci sono due div, il primo chiamato "imgdv", il secondo "txtdv". Io vorrei che questi due div si adattino l'uno all'altro in base all'altezza, per far si che quello che ha l'altezza minore si collochi al centro di quello maggiore.

[Mich_]

Ma sono annidati, affiancati, qualcos'altro?

Magari prova a fare uno schemino (anche con paint) e posta un po' di codice (ad esempio l'HTML dei blocchi e del loro contenitore) in modo che possiamo farci un'idea di cosa vuoi.

[wbcreator]

Subito!

struttura d'esempio:

<div id="contenitore"> 
  <div id="imgdv">imgdv</div> 
  <div id="txtdv">txtdx</div> 
</div>

css d'esempio:

#contenitore { 
  position:absolute; 
  background:rgba(10,10,60,1);  
  height:auto; 
  width:500px; 
} 
#imgdv { 
  position:relative;
  height:200px; 
  width: 200px; 
  background: rgba(50,10,10,1); 
  float:left; 
} 
#txtdv { 
  background:rgba(10,60,10,1); 
  float:left; 
  padding:0px; 
}

provandolo con codepen
viene piu o meno il problema che ho.
A questo punto vorrei riuscire a posizionare il div "txtdv" a metà dell'altezza di "imgdv".

[Mich_]

Quindi quello di sinistra ha misure fisse (200x200px), mentre quello di destra ha misure variabili.

Non so se la cosa e` possibile con metodi semplici (= senza uso di JS)

Potresti provare a dare ai due blocchi interni position: table-cell;
E forse occorre anche definire line-height al contenitore.

Nota: devi anche dare una larghezza al blocco di destra, altrimenti rischi che scivoli sotto all'altro

[wbcreator]

Originariamente inviato da Mich_
Quindi quello di sinistra ha misure fisse (200x200px), mentre quello di destra ha misure variabili.

Non so se la cosa e` possibile con metodi semplici (= senza uso di JS)

Potresti provare a dare ai due blocchi interni position: table-cell;
E forse occorre anche definire line-height al contenitore.

Nota: devi anche dare una larghezza al blocco di destra, altrimenti rischi che scivoli sotto all'altro

Si, avevo previsto in ultima analisi di utilizzare js, ma volevo fosse l'ultima strategia.

Anche perché nel progetto finale quello di sinistra non avrebbe misura fissa, perciò in base a qual'è il maggiore l'altro si deve adattare al suo centro. Però appunto volevo vedere se potevo utilizzare uno stratagemma con i css. Magari avendo un css di base e modificarlo in linea (con php) in base a un qualche attributo. Cosi non è comprensibile, mi spiego meglio.

L'idea del sito è di avere un contenitore con dentro due div, uno dei due contiene esclusivamente immagini(o thumbs), l'altro è misto. La struttura del sito, ha un generatore di contenuti (in php), ossia in base ad un file di setting denominato "set.txt", estraggo i valori necessari a generare il contenuto della pagina. Ora il problema è nato dal fatto che, il cliente (la mia ragazza), dopo aver scritto una certa biografia a destra, voleva che la sua immagine di sinistra non fosse in alto, ma bensì al centro orizzontale della rispettiva biografia! Ora, avrei potuto benissimo semplificare impostando quello specifico contenuto con dimensioni fisse e regolazioni precise, invece mi sono voluto complicare le cose e volevo far si che qualsiasi contenuto si adattasse a questo "setting" in modo automatico. Anche perchè effettivamente in un'altra pagina avviene che, a sinistra abbiamo una thumbs di immagini cliccabili, mentre a destra abbiamo una breve descrizione, ora questo div di destra mi piacerebbe che anche lui in automatico si disponesse al centro orizzontale del div di sinistra.

E' un po come avere l'attributo html "<center>" anziché verticalmente, orizzontalmente.

Ora provo a studiare sui suggerimenti che mi hai dato,
se per caso venisse qualche idea non esitate.
Grazie per il tempo...

[wbcreator]

Originariamente inviato da Mich_
Quindi quello di sinistra ha misure fisse (200x200px), mentre quello di destra ha misure variabili.

Non so se la cosa e` possibile con metodi semplici (= senza uso di JS)

Potresti provare a dare ai due blocchi interni position: table-cell;
E forse occorre anche definire line-height al contenitore.

Nota: devi anche dare una larghezza al blocco di destra, altrimenti rischi che scivoli sotto all'altro

Si, avevo previsto in ultima analisi di utilizzare js, ma volevo fosse l'ultima strategia.

Anche perché nel progetto finale quello di sinistra non avrebbe misura fissa, perciò in base a qual'è il maggiore l'altro si deve adattare al suo centro. Però appunto volevo vedere se potevo utilizzare uno stratagemma con i css. Magari avendo un css di base e modificarlo in linea (con php) in base a un qualche attributo. Cosi non è comprensibile, mi spiego meglio.

L'idea del sito è di avere un contenitore con dentro due div, uno dei due contiene esclusivamente immagini(o thumbs), l'altro è misto. La struttura del sito, ha un generatore di contenuti (in php), ossia in base ad un file di setting denominato "set.txt", estraggo i valori necessari a generare il contenuto della pagina. Ora il problema è nato dal fatto che, il cliente (la mia ragazza), dopo aver scritto una certa biografia a destra, voleva che la sua immagine di sinistra non fosse in alto, ma bensì al centro orizzontale della rispettiva biografia! Ora, avrei potuto benissimo semplificare impostando quello specifico contenuto con dimensioni fisse e regolazioni precise, invece mi sono voluto complicare le cose e volevo far si che qualsiasi contenuto si adattasse a questo "setting" in modo automatico. Anche perchè effettivamente in un'altra pagina avviene che, a sinistra abbiamo una thumbs di immagini cliccabili, mentre a destra abbiamo una breve descrizione, ora questo div di destra mi piacerebbe che anche lui in automatico si disponesse al centro orizzontale del div di sinistra.

E' un po come avere l'attributo html "<center>" anziché verticalmente, orizzontalmente.

Ora provo a studiare sui suggerimenti che mi hai dato,
se per caso venisse qualche idea non esitate.
Grazie per il tempo...

[Mich_]

impostando quello specifico contenuto con dimensioni fisse e regolazioni precise

Questo sarebbe un errore. Infatti tu non puoi conoscere la dimensione del carattere che usera` l'utente (lo puoi impostare, ma l'utente puo` sovrascrivere tale impostazione), per cui non puoi conoscere le dimensioni verticali del tuo blocco.

E' un po come avere l'attributo html "<center>" anziché verticalmente, orizzontalmente.

Hai una strana idea di cosa vuol dire verticale ed orizzontale . Il tag (non attributo) <center> (obsoleto e da non usare) lavora solo in orizzontale, come pure l'attributo HTML align="center" (da non usare se usi i CSS: potrebbe andare in conflitto); lo stesso vale per l'attributo CSS margin:0 auto - questo lo dico perche` potresti trovarti in difficolta` ad interpretare alcuni suggerimenti.

Per centrare in verticale non c'e` un sistema cosi` semplice, proprio perche` i browser devono avere un minimo di liberta` di azione.


Pero` quello che posso consigliarti e` farti un giro tra i layout pronti (alcuni riferimenti tra i "link utili", altri li puoi trovare con una ricerca in rete): credo che qualche esempio di sitemazione al centro in verticale lo trovi.
E mi pare di aver visto qualche altro thread al riguardo: prova a fare una ricerca nel forum (pulsante ricerca in testa al forum)

[ratte]

o/ ! Sicuro... non ho capito bene tutto il tuo layout e quale div debba fare cosa, ma table-cell, come dice Mich, dovrebbe funzionare:

<style>
#contenitore {  
	display:table;
} 
#txtdv { 
	display: table-cell;
	vertical-align: middle;
}
</style>

<div id="contenitore"> 
  <div id="imgdv">imgdiv</div> 
  <div id="txtdv">txt</div> 
</div>

Prova a ripartire da una cosa del genere 8)

o/ !

[Camarillo]

Il metodo segnalato da Ratte è ottimo, se non ti interessa la compatibilità con internet explorer 7 (spero proprio di no...). Comunque ti segnalo questa pagina, a cui faccio riferimento ogni volta che ho un problema del genere. Sono elencati cinque metodi, più o meno buoni, per centrare verticalmente elementi in html e css.

[wbcreator]

Originariamente inviato da Mich_
Questo sarebbe un errore. Infatti tu non puoi conoscere la dimensione del carattere che usera` l'utente (lo puoi impostare, ma l'utente puo` sovrascrivere tale impostazione), per cui non puoi conoscere le dimensioni verticali del tuo blocco.

Però vedi, conoscendo a priori la quantità di testo nel div di destra, automaticamente impostare il margin-top dell'immagine nel div di sinistra mi sarebbe stato piu semplice. Anche se magari l'effetto non sarebbe stato perfetto.

Hai una strana idea di cosa vuol dire verticale ed orizzontale . Il tag (non attributo) <center> (obsoleto e da non usare) lavora solo in orizzontale, come pure l'attributo HTML align="center" (da non usare se usi i CSS: potrebbe andare in conflitto); lo stesso vale per l'attributo CSS margin:0 auto - questo lo dico perche` potresti trovarti in difficolta` ad interpretare alcuni suggerimenti.

Si ammetto di essere un po strano di natura, aimè!!!

Nell'impaginazione se io metto faccio una cosa simile:

<center>
testo1

testo1testo1testo1

testo1testo1
</center>

Abbiamo le tre righe disposte in verticale, perciò l'effetto provoca una disposizione
verticale. Se non avessi messo i
, non sarebbe successo nulla, se non che "testo1"
si sarebbe messo nel centro verticale della pagina. In questo senso dico che <center> funziona verticalmente. Anche se effettivamente la disposizione delle singole righe è orizzontale.

Ho provato questo codice:

<div id="contenitore"> 
<div id="imgdv">
imgdiv

asdasd

sdsdf

sdfsdsdf

sdfdfsdf

sdfsdffd

sdfsdf</div> 
<div id="txtdv">txt

dadada

a

f

adfaf

sdfsdf</div>
 </div>

#contenitore { 
display:table; 
width:500px; } 
#txtdv { 
display: table-cell; 
vertical-align: middle;
 background:rgba(10,60,10,1); 
} 
#imgdv{ 
background: rgba(60,10,10,1); 
display: table-cell; 
vertical-align: middle; 
}

E devo dire che provandolo con codepen funziona alla grande!!!

Riagganciandomi al discorso di prima in questo caso con "vertical-align:middle", abbiamo una disposizione degli elementi verticale, ma il tutto si dispone al centro orizzontale degli elementi disposti in verticale. Ossia, bisogna girare la testa orizzontalmente. Abbiamo l'effetto "<center>" in orizzontale, anziche in verticale.

In sostanza, sebbene si utilizzi dire "vertical", per il singolo elemento in verticale, la disposizione risultante degli altri elementi, è in orizzontale, il suo effetto insomma. Dobbiamo immaginare una linea al centro del div piu alto, il secondo div si posiziona a quel centro.
Normalmente invece, si intende dire "vertical", proprio perche fa riferimento alla distanza che c'è fra top e bottom. Ma l'effetto risultante lo si osserva quando al fianco di quel div ce n'è un'altro piu alto. Il primo div si dispone con una distanza top bottom maggiore, che corrisponde ad avere il testo centrato orizzontalmente rispetto al secondo div. O viceversa.

Mamma mia, spero di essermi spiegato, se ho sbagliato qualcosa correggetemi.

Devo andarmi a rivedere il funzionamento di display, perché table-cell o table mi sono nuovi.

Facciamo cosi, appena avrò pubblicato il sito ve lo posterò cosi vedrete l'effetto finale

Ad ogni modo grazie per il tempo!!!