Impossible de centrer l'image

Question

Je ne peux pas centrer une image dans un div. Comment puis-je centrer l'image avec le balisage suivant?

code html est comme suit:

<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> 

code CSS est la suivante:

#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; 
} 

S'il y a une façon de le faire

Answer 1

Si vous voulez juste au centre l'image horizontalement, vous pouvez changer l'alignement du texte: left vers text-align: center.

Answer 2

Essayez avec text-align:center dans CSS de #post-area.

Voici your example fiddle avec le centre aligné img.

Answer 3

HTML

<div id='post-area' style='background:#000; padding:20px 0;'> 
    <a class='fancybox' rel='group' href='example-big.png'> 
    <img src='http://blog.spoongraphics.co.uk/wp-content/uploads/2011/colourful-logo/18.jpg' /> 
    </a> 
</div> 

CSS

#post-area { 
    font-size:13px; 
    color:#000; 
    text-align:center; 
    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; 

}

voir la démo: - http://tinkerbin.com/gWYGnA6m