Centering images in (HTML) text widgets

• 

  attsebortomramarna · Member · Apr 10, 2009 at 8:16 pm

  • Copy link
  • Add topic to favorites

  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: (visible only to logged in users)

• 

  jalexartis · Member · Apr 10, 2009 at 9:07 pm

  • Copy link

  @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

• 

  panaghiotisadam · Member · Apr 10, 2009 at 10:09 pm

  • Copy link

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

• 

  jalexartis · Member · Apr 11, 2009 at 1:25 am

  • Copy link

  @panaghiotisadam

  Thanks!

• 

  attsebortomramarna · Member · Apr 12, 2009 at 11:46 am

  • Copy link

  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?

• 

  panaghiotisadam · Member · Apr 12, 2009 at 1:16 pm

  • Copy link

  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>

• 

  attsebortomramarna · Member · Apr 12, 2009 at 7:38 pm

  • Copy link

  Thanks alot!