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:
<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>
Codice CSS:
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;
}
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.
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