centre an image in a footer widget

2 Views

I am trying to centre image that sits in a footer widget. I’ve read several of the solutions provided here but I am not sure if I am setting up the code right

MY CSS

Read More
#footer img.center {
display: block;
margin-left: auto;
margin-right: auto;

}

MY HTML 

<img class="display" src="....">
Post Views: 2

Related posts

Leave a Reply

3 comments

  1. You have to add the class ‘center’ on your html code : 

    <div id="footer">
   <img class="display center" src="....">
</div>

    Everything else is fine. and margin ‘auto’ properties is not working without width. so maybe you can add width of image on your css code.

  2. In image class name is display . So change you class name in css. 

    #footer img.display {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align:center;
}

    Demo

  3. In your css you defined that the class is center (and not display), so in your HTML: 

    <div id="footer">
   <img class="center" src="....">
</div>