• Resolved Inv_Trdr

    (@inv_trdr)


    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.

Viewing 12 replies - 1 through 12 (of 12 total)
  • A link to your site might help…

    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.

    Thread Starter Inv_Trdr

    (@inv_trdr)

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

    Thread Starter Inv_Trdr

    (@inv_trdr)

    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.

    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.

    Thread Starter Inv_Trdr

    (@inv_trdr)

    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.

    Thread Starter Inv_Trdr

    (@inv_trdr)

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

    Thread Starter Inv_Trdr

    (@inv_trdr)

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

    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.

    Thread Starter Inv_Trdr

    (@inv_trdr)

    Thanks. Does this center the image though?

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

    Thread Starter Inv_Trdr

    (@inv_trdr)

    Thanks.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Centering an image on the sidebar.’ is closed to new replies.