Question 45676 in CSS Question posted in
Some basic documentation can be found here.

How to center image – CSS

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>
Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search