Center Alignment

  • Unknown's avatar
    hollieurbeck · Member ·

    I am having trouble aligning single pictures to the center. I have tried a lot of possible solutions but none of them worked. I am not sure where to find the CSS and changing that makes me nervous… haha. I am a newbie and figuring this out slowly but surely.

    Thanks!

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

  • Unknown's avatar
    mikestraw · Member ·

    You can align the pictures from within the visual editor. If you click on the picture, you’ll see options appear just above it. The four icons on the left side of that bar of options are for alignment. Click the one that shows the square centered in the text and your image should be centered.

    Hope that helps.

  • kathrynwp · Staff ·

    I think I see the issue. Your theme, Twenty Sixteen, automatically “overhangs” large images — that’s part of the theme’s design. The image overhang on large images is why it’s not possible to centre large images using regular formatting options in Twenty Sixteen.

    If you don’t like this effect, you have a couple of options, including:

    • Upgrade to Premium and add this in your Customizer’s Custom CSS panel to override the default overhang: 
      body:not(.search-results) article:not(.type-page) img.below-entry-meta, body:not(.search-results) article:not(.type-page) figure.below-entry-meta {
  margin-left: -20%;
  margin-right: 20%; 
}
    • Switch to a theme that doesn’t have this overhang.
    • Add inline CSS to each large image, to override the overhang. You would do this by switching to the HTML editor and then adding some inline CSS on each image tag:

      style="margin-left: -20%; margin-right: 20%;"

    For example, in your Pretzel Bun post, if you take this large image:

    <img class=" size-full wp-image-148 aligncenter" src="https://allamericanallergiesblog.files.wordpress.com/2017/07/dsc_0035-e1500326150676.jpg" alt="DSC_0035" width="6000" height="4000" />

    The code would become:

    <img class=" size-full wp-image-148 aligncenter" src="https://allamericanallergiesblog.files.wordpress.com/2017/07/dsc_0035-e1500326150676.jpg" alt="DSC_0035" width="6000" height="4000" style="margin-left: -20%; margin-right: 20%;" />

    You can then remove the centering paragraph code before and after it, as it has no effect:

    <p style="text-align: center;"> ..... </p>

    Let me know it how it goes or if you have any questions about any of these options.

  • Unknown's avatar
    hollieurbeck · Member ·

    mike- that wasn’t working with the theme I had. I selected that option for all of the pictures but it wasn’t moving them. Thank you, though!

    Kathryn- Ahhh! That worked!!! Thank you so much, having them off center was driving me crazy. I tried a few other things I found on forums but none of them worked either. Thank you thank you!

  • kathrynwp · Staff ·

    You’re very welcome, glad you’re set!

  • Unknown's avatar
    mikestraw · Member ·

    I’m glad you got it fixed!

  • Unknown's avatar
    hollieurbeck · Member ·

    Okay actually I have a question. On the computer screen it looks great. But on a phone or a tablet the picture is now to the very very far left of the screen. How do I make it look centered on all formats?

    Thanks!

  • kathrynwp · Staff ·

    You would need custom CSS to be able to restrict the CSS change I gave you earlier to only specific screen sizes, via something called a media query. Media queries can’t be added to inline CSS. Custom CSS is available with the Premium or Business plans. If you decide to upgrade, just let me know and I can help you with the media query. We could also pro-rate your upgrade since you currently have the Personal plan – just let me know.

  • The topic ‘Center Alignment’ is closed to new replies.