CODEWITHSUNDEEP
htmlcsswordpress
Peter Kirkwood
Peter Kirkwood

Reputation: 103

Can't centre link

I have a link, that nothing I do will centre it. I'm not sure which bit of css is stoping it from working.

The html is:

<a href="/wp1/product-tag/armani-jeans/?action=yith-woocompare-add-product&amp;id=28674&amp;_wpnonce=95c22023b0" class="compare button" data-product_id="28674">Compare</a>

and the css acting on it (from when I inspect it) is:

.woocommerce ul.products li.product .button {margin-top:1em}
.woocommerce a.button {font-size: 100%;
margin: 0;
line-height: 1;
cursor: pointer;
position: relative;
font-family: inherit;
text-decoration: none;
overflow: visible;
padding: .618em 1em;
font-weight: 700;
border-radius: 3px;
left: auto;
color: #515151;
background-color: #ebe9eb;
border: 0;
white-space: nowrap;
display: inline-block;
background-image: none;
box-shadow: none;
-webkit-box-shadow: none;
text-shadow: none;}

I just can't work out what combination of things I need to override in order to centre it!

Any advice would be great! Thanks

Upvotes: 0

Views: 55

Answers (2)

stackers
stackers

Reputation: 385

you can do it by using

.woocommerce a.button{ text-align:center}
 or 
.woocommerce a.compare{ text-align:center}

hopefully it will

Upvotes: 0

Rohit Azad Malik
Rohit Azad Malik

Reputation: 32192

Hi now try to this way i thing if you used to this css than your problem is solve

now define your .woocommerce ul.products li.product text-align center in your css

.woocommerce ul.products li.product{text-align:center;}

Upvotes: 1

Related Questions