0

I´m trying to center the image.

I´m sure it´s a pretty easy solution, but I´ve tried several solutions besides starting from scratch 3 times.

#main_image {
  background-color: bisque;
  position: fixed;
  display: block;
  margin: 0 auto;
}

I´ve already tried margin: o auto , text-align: center, positioning relative and absolute. https://codepen.io/lordrott/pen/GbJOQo

Uwe Keim
  • 39,551
  • 56
  • 175
  • 291
gonzaloq
  • 1
  • 2
  • Also see [Center a position:fixed element](https://stackoverflow.com/questions/2005954/center-a-positionfixed-element) and [Center fixed div with dynamic width (CSS)](https://stackoverflow.com/questions/17069435/center-fixed-div-with-dynamic-width-css). – showdev Jun 15 '19 at 06:43
  • "please replace below code this is working. you can just add left:0 and right:0 in #main_image id" #main_image { background-color: bisque; position: fixed; display: block; margin: 0 auto; left: 0; right: 0; } – Maulik Patel Jun 15 '19 at 06:58

5 Answers5

1

Change your position to relative in the css file in the #main_image field.That should work.

#main_image {
  background-color: bisque;
  position: relative;
  display: block;
  margin: 0 auto;
}
kunwarvikrant
  • 53
  • 9
1

Alternatively, 

#main_image {
  background-color: bisque;
  position: fixed;
  display: block;
  margin: 0 auto;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
Marvelous Walrus
  • 433
  • 3
  • 7
0

Try this, 

  #main_image{
       position: relative;
       left: 300px;
       top:50px;
    }
John S
  • 1
  • 2
0

You can keep your applied style. Just add this:

/* Keep your applied style*/
figure {
  display: flex;
  justify-content: center;
}

Or add this to your image

#main_image {
  left: 50%;
  transform: translate(-50%, 0);
}
AdityaSrivast
  • 1,028
  • 1
  • 10
  • 16
0

This is your solution

#main_image {
    display: block;
    position: relative;
    margin-left: auto;
    margin-right: auto;
    background-color: bisque;
}
Kiran Mistry
  • 2,614
  • 3
  • 12
  • 28