Search code examples
htmlcssgridviewstylescenter

How to center this header?

I'm trying to center my header link(Product Name), but when I use text-align : center, margin:auto etc, it still doesn't move. Would anyone please point me toward the right direction?

Here's a fiddle for reference.

Html code:

<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;
}
Solution

  • Apply the styles to the h3, not the a.

    .prod-box h3

    or make the a display: block;