Centering images with css?

  • 1
  • Question
  • Updated 10 years ago
  • Answered
I have tried to center an image with css and have failed miserably 6-7 times now. I've tried class id's, div,text-align cheats, inline css statements, internal css. All different types of ways and have failed so hard. someone please help me out here. Here is the code.

table,tr,td,th{
padding: 8px;border-collapse: collapse; border: thin solid darkgoldenrod; font: color darkgoldenrod; table-layout: automatic
}
hr{
color: red
}
p,ul{
color: DarkGoldenRod; text-align: left
}
ol,table{
color: DarkGoldenRod; text-align: center
}
h1,h2,h3,h4,h5,h6{
colore: white;text-align: center
}
img.right20{
float:right;width:20%;height:20%
}

Welcome to Driving with Galen!




Table of Contents




I. Introduction



II. About Me



III. How to Calculate MPG



IV. Table With Distance, Speed and Time



V. Calculate Savings



VI. Tips for Driving









I. Introduction




Welcome and thank you for coming to Driving with Galen! I
will be instructing you on how to save gas and increase your
car's miles per gallon rating. In this short
instructional, you will find tips on how to calculate MPG and
taking a look at distance, speed and time, as well as
learning tips to save gas and increase your car's life. I
bet you're excited now. So excited you squeezed an animal
until it's eyeballs popped out of socket! Relax, learn
and hopefully after this instructional, you will not only
have a good understanding of efficient driving, but also a
better understanding of road safety. Happy learning!



img src='http://i307.photobucket.com/albums/nn...' style='margin-left auto;margin-right: auto'

http://drivingwithgalen.synthasite.com/

The home page source code. First picture, smiley face.
Photo of Galens

Galens

  • 2 Posts
  • 0 Reply Likes
  • Conflugged

Posted 10 years ago

  • 1
Photo of Wayne Koorts

Wayne Koorts

  • 36 Posts
  • 10 Reply Likes
Hi Galens,

I had a look at your site and I think the simplest way to do this might be to use a combination of two SynthaSite HTML widgets with an image widget in-between. It's always best to use the SynthaSite methods of formatting if at all possible.

To do this with SynthaSite widgets:

1) Drop an HTML widget onto the page.
2) Make changes as you like up until the end of the introduction paragraph.
3) Drop an image widget below the first HTML widget.
4) Upload the smiley face image using the pop-up that appears when you drop the image widget.
5) Once you have selected your image and it is showing in the image widget click the image widget with the picture in it and then click on the "Properties" tab on the right-hand side of the editor. Under "Position" you can then choose to align it to the left, center or right side of the container.
6) Next just drop another HTML widget underneath the image widget and continue with the rest of your content.

If you really do still want to use CSS then you can specify an image using the following code (without the <!-- and --> lines):

<!--
<img style="display: block; margin-left: auto; margin-right: auto;" src="http://link-to-your-image.jpg" />
-->

Hope this helps,

Regards,
Wayne
Photo of Galens

Galens

  • 2 Posts
  • 0 Reply Likes
Thanks Wayne! I know I could easily use synthasite's widgets, but the website is for practice and learning. That code worked like a charm. I appreciate the help. ~Galens~
Photo of Wayne Koorts

Wayne Koorts

  • 36 Posts
  • 10 Reply Likes
Awesome, glad it worked :)