CODEWITHSUNDEEP
htmlcssmargin
Toby van Kempen
Toby van Kempen

Reputation: 1487

Margins aren't applying to my image

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 at all times. Instead of having it centered, it is doing this:

It's really annoying!

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!

Upvotes: 0

Views: 70

Answers (2)

Sowmya
Sowmya

Reputation: 26969

Add display:block; to img

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

DEMO

Upvotes: 2

Filippo oretti
Filippo oretti

Reputation: 49813

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

Upvotes: 0

Related Questions