Joomla.it Forum
Joomla! 3 => Joomla! 3 => : davix10 02 Feb 2017, 12:37:43
-
Salve a tutti, ho fatto una tabella responsive in questo modo:
<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! :)
-
non sono sicuro di aver capito, parli dell'allineamento verticale? l'istruzione css è
td {
vertical-align: top
}
e puoi assegnargli i valori top, middle, baseline, bottom e altri
-
non sono sicuro di aver capito, parli dell'allineamento verticale? l'istruzione css è
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.
-
Allora puoi forzare una dimensione minima, e forzare la visualizzazione del contenuto con
td {
min-height:80px;
overflow:visible;
}
oppure con overflow:hidden, nascondi la parte non inclusa nel box
-
Allora puoi forzare una dimensione minima, e forzare la visualizzazione del contenuto con
td {
min-height:80px;
overflow:visible;
}
oppure con overflow:hidden, nascondi la parte non inclusa nel box
Per ora ho questo
.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]
-
Posta il link così vediamo qual è il problema
-
Posta il link così vediamo qual è il problema
Posto un'immagine perchè per ora il sito è offline.
-
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
-
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/
-
Prova con questa definizione:
.col-sm-6 {
display:flex;
width: 50%;
min-height:150px;
justify-content: center;
align-items:center;
border: solid 1px aqua;
}
-
Prova con questa definizione:
.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?
-
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.
-
Grazie mille! Gentilissimo :)