How to center image

Question

I'd like to use flexbox to center the image. Can I do this without putting the picture in another div?

I think I tried all flexbox options but not sure, that's why I'm asking.

Here's some HTML and CSS code.

  body {
  font-family: sans-serif;
  font-size: 10vw;
  display: flex;
  flex-direction: column;
  background-color: grey;
  word-wrap: break-word;
}

p {
  text-indent: 5vw;
}

p.Intro {
  /* See other colors @ media queries */
}

Img.MainIMG {
  max-height: 50vh;
  max-width: 50vw;
  display: flex;
  align-items: center;
  justify-content: center;

<main>

  <H1>Hi!</H1>
  <p class="Intro">
    Lorem ipsum dolor sit amet.
  </p>
  <p class="Intro">
    Sed ut perspiciatis unde omnis iste natus error.
  </p>
  <p class="Intro">
    Lorem ipsum dolor sit amet.</p>

  <img src="https://images.unsplash.com/photo-1530995377270-ac41692cd439?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzUwNzQzNDE&ixlib=rb-4.0.3&q=80" class="MainIMG" alt="Smiling person">

  <H1>Goodbye!</H1>
</main>

image is an inline-element. As such it can be centered by using `text-align: center` on the parent element. Alternatively make it to a block-level-element and center it with `display: block; margin: 0 auto` — tacoshy, Jan 30 '23 at 10:38

score 1 · Accepted Answer · answered Jan 30 '23 at 10:46

transfer the image to a block-level element with display: block. Block level elements can be centered with margin: 0 auto:

body {
  font-family: sans-serif;
  font-size: 10vw;
  display: flex;
  flex-direction: column;
  background-color: grey;
  word-wrap: break-word;
}

p {
  text-indent: 5vw;
}

p.Intro {
  /* See other colors @ media queries */
}

Img.MainIMG {
  max-height: 50vh;
  max-width: 50vw;
  display: block;
  margin: 0 auto;
}

<main>

  <H1>Hi!</H1>
  <p class="Intro">
    Lorem ipsum dolor sit amet.
  </p>
  <p class="Intro">
    Sed ut perspiciatis unde omnis iste natus error.
  </p>
  <p class="Intro">
    Lorem ipsum dolor sit amet.</p>

  <img src="https://images.unsplash.com/photo-1530995377270-ac41692cd439?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzUwNzQzNDE&ixlib=rb-4.0.3&q=80" class="MainIMG" alt="Smiling person">

  <H1>Goodbye!</H1>
</main>

score 0 · Answer 2 · answered Jan 30 '23 at 10:45

Yes you can. You can use margin: 0 auto property on the image and it will do the trick.

 body {
  font-family: sans-serif;
  font-size: 10vw;
  display: flex;
  flex-direction: column;
  background-color: grey;
  word-wrap: break-word;
}

p {
  text-indent: 5vw;
}

p.Intro {
  /* See other colors @ media queries */
}

img.MainIMG {
  max-height: 50vh;
  /* Make an image height 100% of parent div */
  max-width: 50vw;
  /* Make an image width 100% of parent div */
  display: flex;
  align-items: center;
  justify-content: center;
  
  margin: 0 auto; /*add this*/
}

<main>

  <H1>Hi!</H1>
  <p class="Intro">
    Lorem ipsum dolor sit amet.
  </p>
  <p class="Intro">
    Sed ut perspiciatis unde omnis iste natus error.
  </p>
  <p class="Intro">
    Lorem ipsum dolor sit amet.</p>

  <img src="https://images.unsplash.com/photo-1530995377270-ac41692cd439?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzUwNzQzNDE&ixlib=rb-4.0.3&q=80" class="MainIMG" alt="Smiling person">

  <H1>Goodbye!</H1>
</main>

score 0 · Answer 3 · answered Jan 30 '23 at 10:48

Please change display:inherit style of image. Please add following style.

img.MainIMG {
 max-height: 50vh;
  /* Make an image height 100% of parent div */
  max-width: 50vw;
  /* Make an image width 100% of parent div */
  display: inherit;
  margin-left: auto;
  margin-right: auto;
  }

How to center image

3 Answers3