How to Center Align an Anchor Tag Within a Span Tag?

user_8836947 0
Viewed 123

on my website www.maastraders.shop, I want to align center all the product prices.

I used inspect element and found out that there is a span class named price so I tried to refer to that class in custom CSS panel on my website and tried to override existing settings on that class by using !important at the end of my commands (check code). Even tried using display inline block that I found from another thread on StackOverflow. 

span.price {   
    display:inline-block!important;
    text-align:center!important;
}

Just wanted to entire price (₹400 for example) to be affected but instead only the ₹ symbol is affected and the amount after it remains the same. Even tried editing the div outside of this span class but same thing happen.

wordpress css
2 Answers

You can use this CSS to center the price span using flexbox:

.product__price {
  display: flex;
  justify-content: center;
}

I prefer flexbox because It's more internationally friendly than using text-align. Some might say this is just nitpicking though.

Your question mentions centering an anchor tag but I can't find any of those in your code so I hope this is still the desired result!

user_81791510

The !important rule should only be used as a last resort, as it can't be overridden, instead it's best to use ordering and specificity to override styles. However, this should work:

span.price
{
    display: inline-block !important;
    width: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
}
span.price a
{
    width: auto !important;
    margin: 0 auto !important;
    text-align: center !important;
}
user_12470340
Related