How to center 'read more' link

[beautyfool]

HI there,

I have styled the "Read more" link to look like a little button (basically just gave it a background color + some padding), but I am having trouble centering it. I've tried float: center; text-align center... and I'm not sure what else! I've been looking online and found no answers.

Would anyone know how to do this?

Thanks in advance!
Rene

[Victor Font]

Please post a link to your site.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[beautyfool]

Hi Victor, it's blogforbeauty.com. Thanks!

[Victor Font]

This is a little tricky because we don't have direct access to the p element that wraps around the more link. If we did, adding text-align: center to the paragraph element would center the link within it. But since we only have access to the CSS for a.more-link, we need to add the following to the that element's CSS at line 1515 in style.css:

position: absolute;
left: 50%;
transform: translate(-50%);

Basically, you're moving it half way across the space and then pulling it back 50% of its width.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Christoph]

Hi Victor,
do you think that

.entry-content p:last-of-type

or better

.home .entry-content p:last-of-type

would be too risky in case there is more content after the read more link?

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[beautyfool]

Hi Victor, your code worked perfectly - thank you so much!

Renee

[Author]

Posts