left align caption text for individual images

  • Hi,

    As they are set on auto-updating, I am using the latest versions of WordPress (6.0.2) and free Responsive theme (4.7.4) on a self-hosted site. By default, image captions appear to be centered under an image regardless of where the image is placed. This is generally fine, but when any given caption gets longer and comprises several lines, center alignment for a caption can look very awkward and I really need to change it to left alignment (relative to the associated image).

    I was able to track down CSS for changing to left caption alignment on a page-wide basis, in my instance using the code:

    .page-id-648 figcaption {
    text-align:left;
    }

    But as indicated above I may need/want to do it only for selected images/captions on the page. And even through I am able to track down id numbers for the individual figures and captions that I would like to work with, thus far I have been unable to figure out the CSS syntax on my own that will work to do this. It is probably right in front of my nose somewhere. So any suggestions would be greatly appreciated. Thank you very much in advance for any responses.

Viewing 2 replies - 1 through 2 (of 2 total)

  • You could also give the images a class in the editor. In Gutenberg, the field can be found under “Advanced” at the bottom right. You can then use CSS to decide how the caption is aligned in this class.

    Thread Starter kostuj

    (@kostuj)

    Hi,

    Thank you for your comments. I have had a bit of success in the past creating a CSS class for images, and then having the same specified border values placed around all of the images assigned to that class.

    And I have attempted that for this, but for whatever reason(s) I could not get it to work when trying to align captions associated with the images within the image class I created. I tried at least a dozen different syntaxes with no luck, and maybe I still have something wrong in one or more places. I am please still open for any further suggestions regarding this effort.

    Along the way, however, I did learn about starting a CSS code entry with a hashtag rather than period (which I never knew previously), allowing me to target just one specific caption id at a time. And upon learning that, I could then rather easily alter the caption alignment of individual image captions on a page where deemed better.

    Perhaps this is still not the most efficient manner of proceeding (depending on how many times I might ultimately need to do it). But it certainly provides a usable alternative to having to alter all of the caption alignments in the same manner throughout the entire page, which is all I knew and could do before.

    Thanks again for your thoughts. I appreciate it.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘left align caption text for individual images’ is closed to new replies.