Salve a tutti,
ho un problema nel dimensionare un box all'interno di un contenitore con padding.
Sto utilizzando Bootstrap e semplicemente devo sovrapporre un titolo ad un'immagine. Il titolo deve essere centrato sia orizzontalmente che verticalmente, in base al contenitore, e l'immagine non pu� essere impostata con la propriet� background ma deve essere inserita con tag <img>
Codice HTML:
Codice CSS:codice:<div class="row"> <div class="col-sm-6"> <div id="div-1"> <div id="div-2"> <div id="div-3"> <h1>Titolo</h1> </div> </div> </div> <img src="img.jpg"> </div> </div>
Riesco a posizionare il titolo sopra all'immagine grazie alla posizione assoluta del #div-1, se imposto l'immagine con absolute essa si sposta altrove.codice:#div-1 { position: absolute; width: 100%; height: 100%; } #div-2 { display: table; width: 100%; height: 100%; } #div-3 { display: table-cell; vertical-align: middle; text-align: center; }
Ora, per far funzionare table-cell e vertical-align ho bisogno che #div-1 abbia dimensioni massime rispetto al contenitore, che � .col-sm-6. Questo contenitore ha per default posizione relativa e padding di 15px. #div-1 prende quindi il 100% di larghezza e altezza da .col-sm-6, avendo position absolute. Il problema si presenta qui, il 100% in larghezza e altezza calcola anche il padding, cos� #div-1 � largo 30px in piu. Questi 30px si estendono tutti sul lato destro, perche il <div> viene posizionato a sinistra dopo il padding di .col-sm-6.
Come posso risolvere questo problema? Premetto che non voglio dare padding-right: 30px a #div-1.
Se qualcosa non � chiara chiedete. Grazie

Rispondi quotando