0

I've tried to center a image in css but my code wont work.

img.center { 
    display: block;
    margin-left: auto;
    margin-right: auto;
} 
<img src="mw3.gif" />
Satwik Nadkarny
  • 5,086
  • 2
  • 23
  • 41
Liltaw10
  • 1
  • 1
  • Please provide a runnable code example. StackOverfow provides a way to do this or you can use a site like jsbin or jsfiddle. – Zaqx Feb 18 '15 at 02:26

5 Answers5

2

First let's understand the problem here.

Your HTML is :

<img src="mw3.gif">

and CSS is :

img.center { 
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Now, what the img.center class in the CSS does is that it targets an img tag having the class "center". Now, if you observe you code, the img tag does not have any class attached to it. So, obviously, the class won't be applied!!!

Now that we know what the problem is, let find the solution :

There are actually 2 solutions here. Use the one that makes the most sense in your case.

You can either assign the img tag a class of "center" or you can rename the CSS class to target the img tag i.e.

Solution 1:

Add class "center" to img tag :

<img src="mw3.gif" class="center">

img.center { 
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Solution 2 :

Modify the CSS class to target the img tag : 

<img src="mw3.gif">

img { 
    display: block;
    margin-left: auto;
    margin-right: auto;
}

NOTE : Its a good practice to use the alt property of the img tag. The alt attribute specifies an alternate text for the image, if the image cannot be displayed.

Hope this helps!!!

Satwik Nadkarny
  • 5,086
  • 2
  • 23
  • 41
  • 1
    For what it’s worth, it’s actually not correct to self close the image tag. It’ll still be parsed the way you expect in most cases but heads up that you’re deviating from the spec when you do that. See: http://stackoverflow.com/questions/3558119/are-self-closing-tags-valid-in-html5 – Zaqx Feb 18 '15 at 02:44
  • 1
    @Zaqx Oops!! Didn't know that!! Went through Quentin's answer and got the point you're making!! I have updated the answer as well. Phew, now I have learned something from my own answer!!! Thanks for that!! :) – Satwik Nadkarny Feb 18 '15 at 02:50
  • `` is not correct either… In HTML5 it should just be ``. No closing tag or `/` – Zaqx Feb 18 '15 at 02:55
  • 1
    @Zaqx Yes, I saw that on the W3C site. Was actually a gotcha moment for me!! – Satwik Nadkarny Feb 18 '15 at 03:00
1

Just Use: (Remove .center)

Demo

img{ 
 display: block;
 margin-left: auto;
 margin-right: auto;
} 


img{ 
 display: block;
 margin-left: auto;
 margin-right: auto;
} 
<img src="http://s.imgur.com/images/imgur.gif">
Meer
  • 2,765
  • 2
  • 19
  • 28
Jatin
  • 3,065
  • 6
  • 28
  • 42
  • 1
    +1 While your answer is correct, it doesn't harm to explain the concept behind it. It would be a service to anyone who's new and learning who comes across this. You see, my point is ***"give a man a fish and you feed him for a day; teach a man to fish and you feed him for a lifetime"***!!! – Satwik Nadkarny Feb 18 '15 at 02:45
1

The problem is that your css is not selecting your the img element. The css selector you are using is looking for an img element with the class of center. You can correct this by either 1) removing the .center from your css selector so that the selector is just img like this:

<img src="mw3.gif" class="center" alt="MW3">

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
   }

or 2) by adding the center class to your img tag like this. 

<img src="mw3.gif" alt="MW3"> 

img{
    display: block;
    margin-left: auto;
    margin-right: auto;
   }

Take note of the alt attribute in the <img> tags. This attribute is required by the W3C to validate the markup of an <img> element.

The W3C spec for the img element regarding the alt attribute can be found here. Look under Section (4.7.1.1.2).

MKreegs
  • 138
  • 1
  • 8
0

try to put an id for the img and call the css stylesheet with that id, then try with margin: auto; only

Kevin Antolinez Miranda
  • 25
  • 1
  • 1
  • 5
0

There are more than one ways of centering things in CSS, If you wanna learn about all the possible ways of centering elements in CSS then checkout this detailed article on how to center things in CSS.

Click Here

AmJustSam
  • 268
  • 2
  • 9