Archived topic
How to center featured images in posts and pages from a single css file
10 replies · Started by Enrico on April 28, 2017
Good morning,
I am using this css in the main css file to center featured images in all posts.
.page-header-image {
text-align: center;
}
This code was not working on pages so I added the same code in each page to center the featured image in pages.
Moving the code at the end of the main CSS file it started working on all pages. So I removed the CSS code in each page.
Unfortunately, after some time, I noticed that it was not centering anymore the featured images in posts.
Searching in the forum for a solution I found this new css code
.page-header-image-single {
text-align: center;
}
But also this code, if used in the main css file, it works only on posts.
There is a way to center featured images both in posts and pages using the css code only in the main css file? Or I have to add again the css code in each page? In this last case, it is better to use .page-header-image or .page-header?
Thanks a lot
Enrico
Moving the code at the end of the main CSS file it started working on all pages.
This tells me you probably have a CSS error in your file. Try running it through a validator to check: https://jigsaw.w3.org/css-validator/#validate_by_input
I tested all the version of the CSS code and the validator validated all.
Hmm this code should definitely work on both pages and posts:
.page-header-image-single {
text-align: center;
}How are you adding the code currently? Are you able to provide a link to your site?
Thanks!
In my first website jobseekeritalia.it that css code it has always worked only in posts and not in pages
Now I am developing a new web site digitaldem.it and when I inserted the CSS code from customizer in the "Additional CSS" it started working only in pages.
The customizer was open on a page and I saw immediately the image in the page centered. I saved it successfully.
So I think now that it was not the position of the code at the end of the file that changed how it worked for years, it was the customizer that was opened on a page.
Anyway on both sites now don't works on pages but only on posts.
https://digitaldem.it/2017/04/18/piattaforma-partito-digitale-2-0/
This page is working because the image is inserted as Featured image which means this code would work:
.page-header-image-single {
text-align: center;
}https://digitaldem.it/newsletter/
This page is not working because the image is added as the Page Header image, you can either add the image as Featured image like above, or use this code:
.page-header-image {
text-align: center;
}Let me know if this answers your question.
I added both the code like this:
.page-header-image-single {
text-align: center;
}
.page-header-image {
text-align: center;
}
Is it correct to add both the css? In this way it works on pages and posts and on both sites.
But the images in https://digitaldem.it/newsletter/ was added as Featured image, so I don't know how it become a header image. It could be the Generatedpress add on "page heade" that transformed the image in header image?
Yup you can add both if you want. Looks like it's all working now?
No GP definitely doesn't transform featured image into page header image.
No GP definitely doesn’t transform featured image into page header image.
Technically they're the same thing. The Page Header add-on can use the featured image or a custom uploaded image. This is so you can display a feature image in the archives and use a completely different image on the single post.
I actually suggest people use the featured image in the Page Header add-on instead of the custom image if they can.
Thanks a lot Tom and Leo, using both the css code in Additional Css or Child them is the best solution to center the images in post and pages. I only use featured images, but now I know that in pages they became page headers.
Glad we could help!
