边距不适用于我的图像

Question

I'm having trouble getting margins to work on an image. I have an image, and it has the following CSS:

#logoRedrum{
    position:relative;
    width:50px;

    margin-top:auto;
    margin-right:0;
    margin-bottom:auto;
    margin-left:0;
}

The HTML for the image is as follows:

<img id="logoRedrum" src="resources/img/logoRedrum.png">

What I'm trying to do with this is to have my image centered . Instead of having it centered, it is doing this:

The red backwards "R" with the blue outline is my image. I have googled several times what might be causing the image to stay on the left, but to no avail.

All help greatly appreciated!

Answer 1

Add display:block; to img

#logoRedrum{
    position:relative;
    width:50px;
  display:block;
    margin:0 auto
}

DEMO

Answer 2

If you need to center the image in the main parent its easy, do it like this

//HTML

<div class="centered-content"> <img class="no-margin" src=""/> </div>

//CSS

.contered-content {
    text-align:center;
    }
.no-margin{
   margin:0 auto;
 }