Ciao,
vorrei centrare verticalmente un div in un altro div la cui altezza e' sconosciuta perché dovrebbe adattarsi a quel che resta dello schermo. Ho provato varie cose, ma nessuna sembra funzionare...
Potete aiutarmi?
Ciao,
vorrei centrare verticalmente un div in un altro div la cui altezza e' sconosciuta perché dovrebbe adattarsi a quel che resta dello schermo. Ho provato varie cose, ma nessuna sembra funzionare...
Potete aiutarmi?
Ciao, potresti provare usando display:flex . Ci sono diverse opzioni fra cui il centramento verticale.
Grazie,
usando flex l'allineamento verticale centrato funziona, ma solo se do una dimensione fissa in pixel al parent. Dando un colore di sfondo al parent mi sono resa conto che il vero problema e' che il parent non si espande per estendersi al 100% dello spazio rimanente della pagina (la cui dimensione dipender�' dal tipo di mobile usato), questo credo sia il vero motivo per cui non riesco ad ottenere la centratura.
Questo e' il codice CSS:
codice:.verical_align { background-color:#FF0000; display: flex; justify-content: center; align-items: center; } #linkedin { width: 35px; height: 35px; display: block; overflow: hidden; }
La pagina e' qui, il div incriminato e' all'interno del menu nella dimensione mobile.
Ho anche un'atra domanda riguardo alla compatibilità' di flex, nella guida dice che "display: flex" non e' compatibile con Explorer 10 e che bisognerebbe usare "display: flexbox", ma se uso flexbox non funziona ne su Firefox ne su Safari!
Potresti calcolare e settare le distanza con javascript(jquery piu facilemente per settare il marigine).
Oppure con togliendo display:flex e aggiungendovedo che bene o male si centra.codice:margin:calc(30%) auto
PS
flex o flexbox a seconda del browser funzioneranno o meno. Non vuol dire che devi eslcudere una regola o l'altra.
Puoi usare i prefissi a seconda del browser come vedi negli esempi qui -webkit-flex, -ms-flex
Jquery non lo so usare, ho provato con
ma questo fa apparire la barra verticale quando non e' necessaria, e questo lo vorrei evitare!codice HTML:margin:calc(30%) auto
Mi sa che gli mettero un padding fisso! Tra le opzioni mi sembra la migliore anche se non era proprio quello che volevo!
Grazie dell'aiuto