WordPress.org

1. Inv_Trdr
   Member
   Posted 2 years ago #

   Is it possible to center images on the sidebar? For example, I was trying to put a sponsored ad with the a href and src pointing to a clickable image, but it aligns itself to the left. Could it be because all text might be left aligned in the CSS? How do I just let images be center aligned on the side bar?
   Thank you.

2. esmi
   Theme Diva & Forum Moderator
   Posted 2 years ago #

   A link to your site might help...

3. Shane G
   Member
   Posted 2 years ago #

   Hi,

   You need to copy the following code and paste it in style.css of the theme.

   img.centered
   {
   display: block;
   margin-left: auto;
   margin-right: auto;
   }
   
   img.alignright
   {
   padding: 4px;
   margin: 0 0 2px 7px;
   display: inline;
   }
   
   img.alignleft
   {
   padding: 4px;
   margin: 0 7px 2px 0;
   display: inline;
   }
   
   .alignright
   {
   float: right;
   }
   
   .alignleft
   {
   float: left;
   }

   Add this code in style.css file.of your theme and it should be resolve the problem. If it does not solve the problem then replace the .img{} tags with the above code in style.css.

   Thanks,

   Shane G.

4. Inv_Trdr
   Member
   Posted 2 years ago #

   Does placing the <center> and <center/> work also? The code above will center all images in the sidebars?
   Thanks.

5. Inv_Trdr
   Member
   Posted 2 years ago #

   Thanks. Esmi, http://invictatrader.com is the link. I did not find the above code in my style.css but using the <center> and <center/> tags at the beginning and end of the <img src=............> worked too. Did not add the code above as did not want to see it apply to all images in the sidebar or on pages and posts, if it did. It was a small PR image I was trying to align. The code I saw in my style.css was the one below. Looks similar to one above posted by Shane.
   

   .aligncenter, div.aligncenter, .art-article .aligncenter img, .aligncenter img.art-article, .aligncenter img, img.aligncenter
   {
   	display: block;
   	margin-left: auto;
   	margin-right: auto;
   }
   
   .alignleft
   {
   	float: left;
   }
   
   .alignright
   {
   	float: right;
   }
   
   .alignright img, img.alignright
   {
   	margin: 1em;
   	margin-right: 0;
   }
   
   .alignleft img, img.alignleft
   {
   	margin: 1em;
   	margin-left: 0;
   }

   Thanks.

6. esmi
   Theme Diva & Forum Moderator
   Posted 2 years ago #

   Doh - should have remembered the url. :-)

   Which image is it? Are you adding it via the text widget? If so, you could just try adding class="aligncenter" to the image markup.

7. Inv_Trdr
   Member
   Posted 2 years ago #

   Thanks. I have not added it yet. But I was planning on adding it via the text widget. Where do I add the class="aligncenter" in the image markup? You mean something like ?
   Thank you.

8. Inv_Trdr
   Member
   Posted 2 years ago #

   Looks like I lost the code in the reply above. Should I do something like this?
   Thanks.

9. Inv_Trdr
   Member
   Posted 2 years ago #

   My test code is being turned into a non-clickable link for some reason.

10. buddha trance
    Member
    Posted 2 years ago #

    Inv_Trdr, as esmi is suggesting, you can align the image through the code in the text widget.

    The way I have done it for a single image is something like this:

    <div style="text-align: center"><a href="your-link-here"><img src="your-image-url-here" width="125" height="125" border="0" alt="your-image-description" /></a></div>

    Hope this helps.

11. Inv_Trdr
    Member
    Posted 2 years ago #

    Thanks. Does this center the image though?

12. buddha trance
    Member
    Posted 2 years ago #

    It seems to have worked for me. Otherwise try the <center> tag, or create a css .aligncenter class with margin 0 auto

13. Inv_Trdr
    Member
    Posted 2 years ago #

    Thanks.

Topic Closed

This topic has been closed to new replies.