PROBLEM :

The problem is the good way to center an image using css ?

Is the property text-align: center;

[pastacode lang=”css” manual=”img%20%7B%0A%20text-align%3A%20center%3B%0A%7D” message=”CSS Code” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 1 :

That will not work as the text-align property applies to block containers, not inline elements, and img is an inline element.

Use this instead:

[pastacode lang=”css” manual=”img.%20Center%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20margin%3A%200%20auto%3B%0A%7D” message=”CSS Code” highlight=”” provider=”manual”/]

SOLUTION 2 :
This solution doesn’t always work. if it doesn’t, try.

we tried the following solution.

[pastacode lang=”css” manual=”img%20%7B%0A%20%20%20%20display%3A%20block%3B%0A%20%20%20%20margin%3A%200%20auto%3B%0A%7D” message=”CSS Code” highlight=”” provider=”manual”/]

SOLUTION 3 :
Another way of doing would be centering an enclosing paragraph.
text-align center is a good way to center an image, and did not specify that the property had to be a part of the img tag.

[pastacode lang=”markup” manual=”%3Cp%20style%3D%22text-align%3Acenter%22%3E%3Cimg%20src%3D%22…%22%2F%3E%3C%2Fp%3E” message=”HTML Code” highlight=”” provider=”manual”/] [ad type=”banner”]

SOLUTION 4 :
You can do the following solution: text-align:

[pastacode lang=”markup” manual=”%3Ccenter%3E%3Cimg%20src%3D%22…%22%20%2F%3E%3C%2Fcenter%3E” message=”HTML Code” highlight=”” provider=”manual”/]

SOLUTION 5 :
Here the solution is simply change parent align.
Try this one on parent properties text-align:center

Categorized in: