Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

Every time I work on a new project I do not have any problems to center the text using "text-align: center" to center the text, but I have never seen a similar code to center images so I always have hack the code by either centering the images in the HTML (not the cleanest option) or by giving the image a variable width (which does not work on multiple resolutions). Is there any way to accomplish this that I have not tried? And, does any one know if something like this will be implemented in CSS3?

share|improve this question
    
I dont think so but what I do Is in my HTML file I will add: <center><img src="example.png"/></center> –  Micheal Harker Aug 9 '10 at 20:33
3  
I think this belongs on DocType. –  Darryl Hein Aug 9 '10 at 20:46
add comment

closed as off topic by Joel Spolsky Sep 18 '10 at 3:27

Questions on User Experience Stack Exchange are expected to relate to user experience within the scope defined by the community. Consider editing the question or leaving comments for improvement if you believe the question can be reworded to fit within the scope. Read more about reopening questions here.If this question can be reworded to fit the rules in the help center, please edit the question.

2 Answers

up vote 8 down vote accepted

Set the containing elements style to

text-align:center;

set your image style to

display:inline-block;
margin:auto;
share|improve this answer
add comment

Sruly's answer hits the nail on the head. the only thing I would consider adding is vertical-align: middle; for the image tag, as follows:

display:inline-block;
margin:auto;
vertical-align: middle;
share|improve this answer
add comment

Not the answer you're looking for? Browse other questions tagged or ask your own question.