Center Image in Widget

Community Forums Forums General Discussion Center Image in Widget

This topic is: resolved

Tagged: 

This topic contains 6 replies, has 2 voices, and was last updated by  Maryi 5 months, 2 weeks ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #105151

    Maryi
    Participant
    Post count: 9

    Hi,

    I can’t figure out how to center an image in a widget on the Home page. I don’t want text to wrap around the image.

    I tried adding img class=”aligncenter” but that didn’t work. I can’t make the image wider. I tried using the Featured Page widget but it would only allow a thumbnail image and I need my image to be bigger than that. Setting alignment to none didn’t center the image.

    I have an under construction page up so please log in to view the Home page.

    http://boulderneuromovement.com/wp-admin/

    username Guest
    password VhAA29PxTXQuVK

    Thanks.

    http://boulderneuromovement.com/wp-admin/
    #105160

    essaysnark
    Participant
    Post count: 342

    Assuming you’re talking about the book cover image and the “click to buy” Amazon link, you can just put this under the image:

    <br clear="all">

    For centering, you should be able to use this:

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

    Also there’s no “close image” tag – this is not actually valid HTML: </img> If you want to “close” the img tag you can put a /> at the end of it.

    #105162

    Maryi
    Participant
    Post count: 9

    Thanks for your quick reply!

    Here’s what I did but the image still isn’t centered.

    I added <p style=”text-align:center;”> before the image class and src.

    I put <br clear=”all”> after the image.

    I put </p> after the Amazon link.

    Did I miss something?

    Thanks.

    • This reply was modified 5 months, 2 weeks ago by  Maryi.
    • This reply was modified 5 months, 2 weeks ago by  Maryi.
    #105165

    essaysnark
    Participant
    Post count: 342

    Looks like you have a style defined like this:

    .textwidget img {
        float: left;
        margin-right: 5px;
    }

    That float: left is causing the problem. Delete that and you should be good.

    #105166

    essaysnark
    Participant
    Post count: 342

    Sorry – wait – that’s going to mess up the other layout you’ve got with the little accent images. Let me look at this for a moment.

    #105167

    essaysnark
    Participant
    Post count: 342

    So the problem is that the style you have defined on the textwidget class is taking precedence on all images that you place in any textwidget. What you might need to do is define a style for use on those little flower accent images and take the float: left off of the textwidget level. I tried playing with things like the !important tag on the book class that you have and couldn’t get it to work based on the current hierarchy. Sorry that I didn’t have an easy answer for you! I’m no CSS whiz so maybe someone else will pop in and see the solution.

    #105352

    Maryi
    Participant
    Post count: 9

    I defined a new style for the little flower and that worked. Thanks for your help essaysnark!

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

You must be logged in to reply to this topic.