Question

I cannot center a image in a div. How can I center the image given the following markup?

html code is as follows:

<div id='post-area' style='background:#000; padding:20px 0;'>
  <a class='fancybox' rel='group' href='example-big.png'>
    <img src='example.png'  />
  </a>
</div>

css code is as follows:

#post-area {
  font-size:13px;
  color:#000;
  text-align:left;
  width:450px;
  height:auto;
  font-family:Meera
  clear:both;
  margin-top:20px;
  letter-spacing:normal;
}

#post-area img {
  max-width:250px;
  height:auto;
  float:none;
  margin:0 auto;
}

If there is any way to do this

Answer 1

If you just want to center the image horizontally, you could change text-align:left to text-align: center.