Trying to center image in image widget

  • I’ve searched this topic, and while it’s addressed, I’m not achieving the right results with any of the posts I’ve found.

    I’m have an image widget, and am trying to center the image with the “Advanced Options” in the Image widget.

    I’m currently trying “<div align=”center”>” in the “Image CSS Class” form field, but it’s not centering the image.

    If someone can tell me if an image can be centered in the Image Title Attribute and Image CSS Class fields, and if so, what should go there, I’d be very grateful.

    thanks

    The page I need help with: [log in to see the link]

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

  • Hi
    They all look centred to me….

    Colin

    align=”center” is not valid HTML in HTML5, and wouldn’t work as a CSS class regardless. If you want to center the image use the aligncenter CSS class. This is a class that WordPress themes are generally required to implement. It’s normally used when center-aligning images in the post editor, but should work on images in widgets.

    • This reply was modified 6 years, 9 months ago by Jacob Peattie.
    Thread Starter MemeRunner

    (@memerunner)

    Thanks, Jacob. I entered “aligncenter” in the Image CSS Class field and it worked great.

    One more question. That centered it horizontally, but now it’s slightly toward the top.

    Do you know what I should put in the Image CSS Class field to center it vertically?

    You don’t really need to vertically center it because it’s the only element in the box, what you need to do is remove the added spacing at the bottom of the image so that the padding in the box is the same on the top and bottom. It’s a small distinction but true vertical centering in CSS is a different topic altogether.

    But there isn’t anything you can add to the widget to do this, you’ll need to use the Additional CSS section of the customiser to do this. In that section add this CSS:

    .sidebar .widget_media_image .aligncenter {
    margin-bottom: 0;
}
    Thread Starter MemeRunner

    (@memerunner)

    Thanks, Jacob. Interesting. And really appreciate your help with this. 

    .sidebar .widget_media_image {
    text-align:center;
}

    works at least in my case!

    this worked for me

    .sidebar-widget.widget_media_image {
    text-align:center;
    }

    I can’t seem to get my widgets center aligned in my sidebar. I’ve tried some of they suggestions and they don’t work for me. My site is https://www.weathermike.com
    Is there an easy way to do it in WordPress?

    I figured it out. I just added <center> in the beginning of the script, and </center> at the end of the script and it worked perfectly.

    The <center> tag is not supported in HTML5 and should not be used…

    Instead, click on the image in the widget and and then select “Edit Image”

    Once there select the Advanced Options

    In the section for Image CSS Class just add aligncenter

    That should center the image

    Hello everyone, I entered “aligncenter” in the Image CSS Class field under Image Details, and still did not work. I am using the WordPress Twenty Seventeen blog template. please help. Thanks.

    I too am having problems getting my image centered in my sidebar widget. I had no issues prior to say a month or 6 weeks ago, but noting I’ve tried seems to work, including using aligncenter in the css field. Site url is leadershiprockland.org.

    Look here:

    https://www.trucklesoft.co.uk/

    Footer area 4. I have nhs link. Won’t Center.

Viewing 13 replies - 1 through 13 (of 13 total)
  • The topic ‘Trying to center image in image widget’ is closed to new replies.