Centering images in (HTML) text widgets

  • Author
    Posts
  • #351755

    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.

    #351863

    jalexartis
    Member

    @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

    #351876

    @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;"

    #351906

    jalexartis
    Member
    #352024

    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?

    #352026

    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>
    #352030

    Thanks alot!

The topic ‘Centering images in (HTML) text widgets’ is closed to new replies.