Réduire espacement entre titre et texte+ centrage

J'ai fait plusieurs test sur mon code css mais je n'arrive pas à réduire l'espacement entre mon titre (item a et b) et la description (item p)

Quels tests as tu effectué ?
As tu essayé de jouer avec les attributs PADDING et MARGIN de tes différents éléments ??

PS: NB : Pour poster du code sur le forum.. merci d'utiliser la coloration syntaxique (les balises de code).
Explications disponibles ici : https://codes-sources.commentcamarche.net/faq/10686-le-nouveau-codes-sources-comment-ca-marche#balises-code
Cela fait deux fois que j'édite tes messages pour les ajouter.
Merci d'y penser la prochaine fois.

Bonjour,

J'ai effectué quelques modifications de mon code.
J'ai donc réussi à réduire l'espacement entre mon titre et mon texte. J'ai réussi à centrer mon titre et mon texte.
Néanmoins, j'aimerai descendre le titre et le texte afin qu'ils se trouvent plus au milieu de la vignette.

J'ai testé le code:

margin: auto;

ainsi que différents padding mais je n'y arrive pas.

Où alors peut-être que je ne l'indique pas au bon endroit...
Peut-être avez vous une idée?

mon code est:

<code><script>

$(document).ready(function() {

 //move the image in pixel
 var move = -15;
 
 //zoom percentage, 1.2 =120%
 var zoom = 1.2;

 //On mouse over those thumbnail
 $('.item').hover(function() {
  
  //Set the width and height according to the zoom percentage
  width = $('.item').width() * zoom;
  height = $('.item').height() * zoom;
  
  //Move and zoom the image
  $(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
  
  //Display the caption
  $(this).find('div.caption').stop(false,true).fadeIn(200);
 },
 function() {
  //Reset the image
  $(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100}); 

  //Hide the caption
  $(this).find('div.caption').stop(false,true).fadeOut(200);
 });

});

</script>
<style>
body 
 {<strong>></strong>
  <link href='http://fonts.googleapis.com/css?family=raleway' rel='stylesheet' type='text/css'>
<strong>></strong>}


.item {
 width:250px;
 height:250px; 
 border:2px solid #222; 
 margin:5px 5px 5px 0;
 
 /* required to hide the image after resized */
 overflow:hidden;
 
 /* for child absolute position */
 position:relative;
 
 /* display div in line */
 float:left;
}

.item .caption {
 width:250px;
 height:250px;
 background:#000;
 color:#fff;
 font-weight:light;
        text-align:center;
        
       
      
  
 /* fix it at the bottom */
 position:absolute;
 left:0;

 /* hide it by default */
 display:none;

 /* opacity setting */
 filter:alpha(opacity=80);    /* ie  */
 -moz-opacity:0.8;    /* old mozilla browser like netscape  */
 -khtml-opacity: 0.8;    /* for really really old safari */  
 opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption a {
 text-decoration:none;
 color:#9400D3;
 font-size:20px; 
 font-weight:normal;
        text-align:center;
        line-height:normal;

 /* add spacing and make the whole row clickable*/
 padding:5px; 5px; 20px; 5px;
 display:INLINE-BLOCK;
}

.item .caption b {
 text-decoration:none;
 color:#9400D3;
 font-size:20px; 
 font-weight:bold;
        text-align:center;
        line-height:normal;

 /* add spacing and make the whole row clickable*/
 padding:5px; 5px; 20px; 5px;
 display:INLINE-BLOCK;
}

.item .caption p {
 padding:2px; 2px; 5px; 2px;
 margin:2;
 font-size:16px;
        font-weight:light;
        text-align:center;
        line-height:normal;
         
}

.item img {
 border:0;
 
 /* allow javascript moves the img position*/
 position:absolute;
}

.clear {
 clear:both; 
}
</style>
>

</code>

merci de votre aide
canvas

Juste pour info, et après de nombreuses recherches j'ai trouvé quel code ajouter afin de modifier le centrage vertical du texte:

position: relative;
        top: 40%;

et cela fonctionne!!

merci de vos conseils;)