Need help? Check out our Support site, then


Centering images in (HTML) text widgets

  1. attsebortomramarna
    Member

    Hey folks!

    I am wondering how to center an image in a text widget. But it is not just that simple. I have found some code and tried it, but it didn´t result in the way i wanted it.

    Is the link around? Just in case it isn´t: http://attsebortomramarna.wordpress.com/
    Right now I`m just using it to test code and different design and stuff.

    I have used this code for the first widget:
    <p align="center"><img src="http://www.ubuntu.com/files/countdown/static.png" width="180" height="150" alt="Ubuntu: For Desktops, Servers, Netbooks and in the cloud" border="0"></p>

    The code works, but the image isn´t exactly centered. It´s slightly to the right. I want it to be exaktly centered. And also, after adding the centering-code, some extra space was created under the image. Why?

    The blog I need help with is attsebortomramarna.wordpress.com.

  2. @attsebortomramarna

    I create a "normal" post, with all the attributes that I want; go the the HTML page; copy all; and then paste the HTML code in the text widget. This works everytime for me. --jim

  3. @jalexartis: Unfortuntely some codes in text widgets don't produce the same result in all themes.

    @attsebortomramarna: Remove the p coding and add this instead between "img" and "src" (with a space before and space after it):
    style="margin-left:56px;"

  4. @panaghiotisadam

    Thanks!

  5. attsebortomramarna
    Member

    Thanks!

    But... the theme I´m using now have a variable width and the boxes scale with the size of the browser window. And if I get it right, that code makes the pictures/buttons stay at a fixed width to the left.

    I read something about a similar code (I think) which involved %, a code where percentage of width and height could be used. I sounded good, but I never got it to work. Any ideas about this?

  6. Yeah you're right - my previous suggestion won't do in this case, because Rounded has a flexible-width sidebar (to me a really stupid idea). Here you are:

    <table align="center" style="padding-right:18px;"><tr><td>
    IMAGE_CODE_HERE
    </td></tr></table>
  7. attsebortomramarna
    Member

    Thanks alot!

Topic Closed

This topic has been closed to new replies.

About this Topic