How do I center an within a div?

I have been trying to center this image inside its div, but it keeps aligning to the left.

HTML

<div id="main">
  <div id="left">This is a test</div>
  <div id="right">
    <h2 id="fish">Fishtail</h2>
    <img height="150px" width="250px" src="image.jpg">
  </div>
</div>

CSS

#left, #right {
  width: 40%;
  margin:5px;
  padding: 1em;
  color:#51CBED;
  font-size:20px;
  padding:15px;
  background-color:white;
}
#left {
  float:left;
}
#right {
  float:right;
}
#fish {
  text-align:center;
}
#main {
  height:800px;
  width:950px;
  background-color:black;
  opacity:.75;
  filter:alpha(opacity=75);
  margin-top:10px;
  margin-bottom:75px;
  padding:20px;
}

I have tried using margin: auto; and align:middle; but neither seem to work.


solution

No need for relative/absolute positioning.

A simple way to solve this is by setting display:block on the image.

jsFiddle demo - it works perfectly.

CSS

#main #right img {
  margin: 0px auto;
  display: block;
}