Images not centering – CSS Fix

  • Hi,

    My blog is – https://tqsmagazine.co.uk/

    When using the visual editor, I select ‘center’ and the images appear to follow this instruction, however upon publication they all left-align. I’ve read a few forums with people experiencing the same problem and it seems to be a CSS fix. Being hopeless at CSS i’ve been unable to amend this myself. I was wondering whether anyone could please take a look and suggest some CSS?

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

  • Ensure you’ve declared an .aligncenter class in your style.css file; something like this should work:

    .aligncenter {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
    Thread Starter jamiemch

    (@jamiemch)

    Hi six hours, thanks for the help.

    I had nothing like that in my style sheet, I added it but it hasn’t worked, any other ideas?

    thanks!

    You also have to make sure that your image is seen as a “block” as opposed to the default “inline”. I’d do this:

    img.aligncenter {
display: block;
margin: 0px auto;
}

    Thread Starter jamiemch

    (@jamiemch)

    Hi thanks new nine, I added that but I’m afraid it didn’t help either, although I have no idea where it’s meant to go so it’s just kinda plonked in the stylesheet.

    Here’s an example of a post where it’s not working if that helps

    https://tqsmagazine.co.uk/welcome-to-the-new-face-of-dc-comics/

    Cheers!

    Jamie

    Try adding:
    #content
    to

    img.aligncenter {
display: block;
margin: 0px auto;
}

    There’s a float: left
    call in your content and that may be forcing it.

    Thread Starter jamiemch

    (@jamiemch)

    That seems to have done the trick!

    Thanks a lot Dragonsjaw.

    Jamie

    stenspect

    (@stenspect)

    Hi Guys,
    Can you be more specific regarding the code and where to place this in the CSS file? I had no problem centering images until I upgraded to the latest install of wordpress.

    Best,
    Christen

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Images not centering – CSS Fix’ is closed to new replies.