Hi,
The problem you're facing is created by the slideshow feature of the HTML module. It uses jQuery Cycle which positions each slide element absolutely and then places them on the left at 0 and the top at 0. That will mess up any kind of centering if you don't have your images wrapped in an element with a width equal to the space you want the image centered in. Take this for example:
<div style="text-align: center; width: 715px;">
<img alt="" src="/Data/Sites/1/media/hydrangeas.jpg" style="width: 250px; height: 188px;" />
</div>
<div style="text-align: center; width: 715px;">
<img alt="" src="/Data/Sites/1/media/img_1994.jpg" style="width: 250px; height: 187px;" />
</div>
<div style="text-align: center; width: 715px;">
<img alt="" src="/Data/Sites/1/media/img_2029.jpg" style="width: 250px; height: 187px;" />
</div>
This will center the images in a space that is 715px wide. You could place a class on the divs and then set the style in your CSS instead of using inline style.
This should get you going in the right direction, let me know if you have further questions.
Edit: you can see this working at https://demo.mojoportal.com/new-page.aspx until the demo site is reloaded or someone changes my example.
HTH,
Joe D.