CODEWITHSUNDEEP
htmlcssgridviewstylescenter
RedGiant
RedGiant

Reputation: 4748

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

Upvotes: 0

Views: 198

Answers (2)

DadNapper
DadNapper

Reputation: 2751

Try this instead:

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

}

Upvotes: 1

Dan Grahn
Dan Grahn

Reputation: 9424

Apply the styles to the h3, not the a.

.prod-box h3

or make the a display: block;

Upvotes: 1

Related Questions