Как центрировать этот заголовок?

Question

Я пытаюсь центрировать ссылку заголовка (Название продукта), но когда я использую text-align : center, margin:auto и т. Д., Он все равно не перемещается. Кто-нибудь, пожалуйста, укажет мне в правильном направлении?

Для справки: a fiddle.

код Html:

<a href="#"><img src='jpg' alt='Image' /></a> 
<h3> 
<a href="%PRODUCT_URL%">Product Name</a> 
</h3> 

CSS:

.prod-box h3 a{ 
    text-decoration: none; 
    width:140px; 
    text-align : center ; 
    margin: 5px 0; 
    color:#888; 
    font: italic normal 14px georgia; 
    font-style: italic; 
} 

Answer 1

Применить стили к h3, а не a.

.prod-box h3 

или сделать adisplay: block;

Answer 2

Попробуйте вместо этого:

.prod-box h3{ 
    text-decoration: none; 
    width:140px; 
    text-align : center ; 
    margin: 0 auto; 
    color:#888; 
    font: italic normal 14px georgia; 
    font-style: italic; 

}