Centrare immagine con didascalia a scompara (e didascalia)

Buonasera amici,
avrei piacere di inserire nel mio portale le immagin i con didascalia a scomparsa, l'effetto (a parer mio) è molto bello!

Diciamo che, a grandi linee, ci sono riuscito ma.... mentre viene centrata la didascalia nell'immagine, l'l'immagine non viene centrata nel topic.
quale potrebbe essere la possibile soluzione tenendo presente che il css relativo è questo:

Codice:

.classe_img_con_didascalia {
float: left;
position: relative;
overflow: hidden;
 }
.classe_img_con_didascalia p {
position: absolute;
left: 0;
bottom: 0;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
color: #fff;
display: none;
width: 100%;
padding: 10px;
 }
.classe_img_con_didascalia:hover p {
display:block;
}

e il codice html questo:

Codice:

[center]<div class="classe_img_con_didascalia"><img src="https://i.servimg.com/u/f26/19/63/65/31/b__p10.jpg" width="600" height=389"><p>[size=18][i]Bruno Lauzi con Gino Santercole[/i][/size]</p></div>[/center]

questo l'esempio:


Qui vediamo l'immagine al centro come la vorrei!
La didascalia viene sotto chiaramente perché manca il css, altrimenti verrebbe in basso nell'immagine con scritta bianca e sfondo nero centrata!

Da me invece si vede così:



Sicuramente il problem è nel css ma dove esattamente? Non so lavorare con il css.

Grazie per il vostro aiuto

Ciao sì, l'errore sta nel CSS.

Rimuovi questa parte: float: left; altrimenti l'intero div verrà allineato a sinistra

Grazie MattiaDes, era proprio quello!

Ma adesso è sorto un nuovo problem, la didascalia viene centrata ma il nero va oltre l'immagine sia a destra che sinistra.
E' possibile far si che occupi solo la parte dell'immagine? La cosa migliore sarebbe che il "nero" occupi sempre la parte della discalia, l'immagini non sono sempre uguali cambiano di volta in volta e la didascalia potrebbe essere più lunga o più corta!

Questo è come viene adesso:



Grazie

Mmmh bel problemino, purtroppo se la dimensione delle immagini cambia di volta in volta non credo ci sia una soluzione unica, ma bisogna adattarla in base alla larghezza dell'immagine.

La riga con il testo ha larghezza 100%, in modo che si adatti automaticamente e riempa l'intera larghezza dell'immagine. Noi però all'immagine non abbiamo impostato una larghezza e quindi "occupa" tutta la larghezza del topic.

Una soluzione può essere questa, ovvero la specifica della larghezza:

Codice:

[center]<div class="classe_img_con_didascalia" style="width: 598px;"><img src="https://i.servimg.com/u/f26/19/63/65/31/b__p10.jpg" width="600" height=389"><p>[size=18][i]Bruno Lauzi con Gino Santercole[/i][/size]</p></div>[/center]

Risultato:

Stra-urka MattiaDes, benissimo!

Grazie mille

buona serata, archivio come risolto