-2

I can't seem to center my image, it's positioned absolute to it's parent which is relative.

I've used inspect element to try many ways, but it doesn't seem to want to work.

Please see the example here: http://dassiedev.dassieartisan.com/furniture

Here's my CSS:

    .tm-switch-image-container {
    position: relative;
    overflow: hidden;
    height: 276px;
}
.tm-switch-image-container img {
    width: 276px;
    height: 276px;
    max-width: none;
}
Jake Punton
  • 9
  • 1

1 Answers1

0

To center an img within a div, give the img a display: inline-block rule, and then give the div a text-align: center rule. This will center it horizontally.

.tm-switch-image-container {
    position: relative;
    overflow: hidden;
    height: 276px;
    text-align: center;
}

.tm-switch-image-container img {
    width: 276px;
    height: 276px;
    display: inline-block;
}
laptou
  • 6,389
  • 2
  • 28
  • 59
  • 1
    This didn't quite get the results the OP was looking for (at least I believe so). You have to additionally remove the width and height styling on `.tm-switch-image-container img` for the furniture to show up centered. – Jason Klas May 21 '18 at 21:32
  • 1
    @JasonKlas If the image is only being centered horizontally, and the container is wider than 276px, then this should work. – laptou May 21 '18 at 21:33
  • "and the container is wider than 276px" that explains it, thank you! My monitor can't fit 3 of the images horizontally without shrinking them. – Jason Klas May 21 '18 at 21:35