Tabelle responsive

[davix10]

Salve a tutti, ho fatto una tabella responsive in questo modo:

Codice: [Seleziona]

<div class="row" align="center" style="padding: 30px;">
<div class="col-sm-6 col-sm-push-6 "> testo1<>
<div class="col-sm-6 col-sm-pull-6">immagine1<>
<div class="col-sm-6 "> testo2<>
<div class="col-sm-6 ">immagine2<>
<div class="col-sm-6 col-sm-push-6 ">testo3<>
<div class="col-sm-6 col-sm-pull-6 ">immagine3<>
<>

in modo che diventi su smartphone tutti in colonna con l'inversione testo1-immagine1 e testo3-immagine3.


Le immagini rimangono al centro della colonna mentre il testo rimane allineato al centro ma non allineato verticalmente, immagino perchè la cella del testo sia più piccola di quella dell'immagine.
C'è una soluzione al problema?


Grazie in anticipo!

[rezor]

non sono sicuro di aver capito, parli dell'allineamento verticale? l'istruzione css è

Codice: [Seleziona]

td {
  vertical-align: top
}
e puoi assegnargli i valori top, middle, baseline, bottom e altri

[davix10]

non sono sicuro di aver capito, parli dell'allineamento verticale? l'istruzione css è

Codice: [Seleziona]

td {
  vertical-align: top
}
e puoi assegnargli i valori top, middle, baseline, bottom e altri

Grazie per la risposta!


Avevo già provato ma non funziona e credo perchè in realtà la tabella creata ha la cella dell'immagine più grande rispetto alla cella dove è presente il testo e quindi non si allinea verticalmente perchè occupa solo lo spazio necessario.

[rezor]

Allora puoi forzare una dimensione minima, e forzare la visualizzazione del contenuto con

Codice: [Seleziona]

td {
   min-height:80px;
   overflow:visible;
}
oppure con overflow:hidden, nascondi la parte non inclusa nel box

[davix10]

Allora puoi forzare una dimensione minima, e forzare la visualizzazione del contenuto con

Codice: [Seleziona]

td {
   min-height:80px;
   overflow:visible;
}
oppure con overflow:hidden, nascondi la parte non inclusa nel box

Per ora ho questo

Codice: [Seleziona]

.col-sm-6 {
    width: 50%;
   min-height:800px;
    overflow:hidden;
   vertical-align: middle!important;
   border: solid 1px;
    border-color: aqua;
  }

ma continua a rimanere tutto allineato in alto. Non capisco perchè[/code]

[rezor]

Posta il link così vediamo qual è il problema

[davix10]

Posta il link così vediamo qual è il problema

Posto un'immagine perchè per ora il sito è offline.

[rezor]

ma come faccio a vedere il markup da una foto? metti il brandello di codice html e dello stile possibilmente su un jsfiddle così rimane a disposizione dei futuri lettori

[davix10]

ma come faccio a vedere il markup da una foto? metti il brandello di codice html e dello stile possibilmente su un jsfiddle così rimane a disposizione dei futuri lettori

Scusami!


Eccolo
https://jsfiddle.net/ham79aet/

[rezor]

Prova con questa definizione:

Codice: [Seleziona]

.col-sm-6 {
    display:flex; 
    width: 50%;
    min-height:150px;
    justify-content: center;
    align-items:center;
    border: solid 1px  aqua;
  }

[davix10]

Prova con questa definizione:

Codice: [Seleziona]

.col-sm-6 {
    display:flex; 
    width: 50%;
    min-height:150px;
    justify-content: center;
    align-items:center;
    border: solid 1px  aqua;
  }

Grande! Ma dove sbagliavo? Dovevo mettere centrati gli oggetti al posto del testo?

[rezor]

No, l'errore è che vertical-align mi sa che si applica solo se il parent ha

display:table-cell

altrimenti e comunque risulta più comodo usare flex, è una serie di proprietà - completamente supportate da tutti i browser - che permettono un allineamento un po' più facile dei float e display che usavamo fino a qualche anno fa.

[davix10]

Grazie mille! Gentilissimo