Image align center

  • Unknown's avatar
    abobloggare · Member ·

    Hi,

    I haven’t had this issue when creating the page, but at some point the alignment of the photos on front page has changed. In the advanced options for the photos I have added the tag aligncenter in Image CSS Class. This worked fine before, but now it doesn’t work anymore. What should I do to change the alignment?

    Thanks in advance!

    The blog I need help with is: (visible only to logged in users)

  • karenlattfield · Staff ·

    Hi abobloggare,

    It looks like you are using the Affinity theme? Based on that, are you referring to the alignment of images on the front page when viewing your site on smaller screens? I ask simply because you have two columns on the front-page on larger screen sizes and the alignment here looks centered. However on smaller screens it isn’t.

    This is because your images are wrapped in a ‘figure’ tag, because the images include captions. You would need to center the figure tag. However you can’t easily do that without adding some custom CSS (you’d need a Premium or Business plan to do that). If you have one of these plans, you can add the following CSS to the Custom CSS editor:

    .widget-media-image figure {
margin: 0 auto;
}

    Alternatively your solution of adding the class of aligncenter to the Image CSS Class will work with images that don’t have captions added.

    I hope this helps!

  • Unknown's avatar
    abobloggare · Member ·

    Yes, I am using the Affinity theme and yes, I am referring to the alignment of images on front page – but when viewing the site on both big and small screens. For me, all images on front page is aligned to left (the image is not centered with the image title and the line under the image title). It’s weird that the image css class worked before, but not anymore…

    Unfortunately I have not access to custom CSS, so I was hoping that there is some other solution. Maybe I just have to change it to a custom HTML widget instead – I was just hoping that there is an easier solution, like adding a tag to the image widget.

  • karenlattfield · Staff ·

    The image widget was replaced not too long ago with a new image widget, and it is apparently by design that the alignment options aren’t there. Here’s an earlier forum thread which goes into a bit more detail.

    I think the best work around is to use the Custom HTML widget as you suggest. The following code would work, substituting the example images, alt tag, links and caption text with what you need:

    <figure style=”max-width:500px;” class=”wp-caption aligncenter”>

    <img alt=”Q& Victoria” src=”https://abobloggare.files.wordpress.com/2016/11/qandvictoria.jpg”>

    <figcaption class=”wp-caption-text”>Caption text here</figcaption>
    </figure>

  • karenlattfield · Staff ·

    Here’s the code again but this time in a code block so the a tag doesn’t automatically get formatted as it did above: 

    <figure style="max-width:500px;" class="wp-caption aligncenter">
<a href="https://qandvictoria.wordpress.com/">
<img alt="Q& Victoria" src="https://abobloggare.files.wordpress.com/2016/11/qandvictoria.jpg">
</a>
<figcaption class="wp-caption-text">Caption text here</figcaption>
</figure>
  • Unknown's avatar
    abobloggare · Member ·

    Thanks for the info, then that is why the tags don’t work anymore! I’ll change all the widgets to HTML widgets instead.

  • karenlattfield · Staff ·

    Happy to help, if you have any more questions feel free to ask.

  • The topic ‘Image align center’ is closed to new replies.