How to center image-CodePudding

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 >
    Lorem ipsum dolor sit amet.
  </p>
  <p >
    Sed ut perspiciatis unde omnis iste natus error.
  </p>
  <p >
    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"  alt="Smiling person">

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

CodePudding user response：

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 >
    Lorem ipsum dolor sit amet.
  </p>
  <p >
    Sed ut perspiciatis unde omnis iste natus error.
  </p>
  <p >
    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"  alt="Smiling person">

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

CodePudding user response：

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 >
    Lorem ipsum dolor sit amet.
  </p>
  <p >
    Sed ut perspiciatis unde omnis iste natus error.
  </p>
  <p >
    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"  alt="Smiling person">

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

CodePudding user response：

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

CodePudding user response：

Yes, you can center the image using flexbox without putting it in another div. You can set the display property of the image to "flex" and use the "align-items" and "justify-content" properties to center the image both horizontally and vertically within its parent element.

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

The "align-items" property determines how items are aligned along the cross axis within their parent container. When set to "center", it centers the items within the parent. The "justify-content" property determines how items are distributed along the main axis within their parent container. When set to "center", it centers the items within the parent.

By setting both properties to "center", the image will be centered both vertically and horizontally within its parent element. You may also adjust the "max-height" and "max-width" properties to control the size of the image if needed.