Positioning images using Flexbox

Asked

Viewed 713 times

0

I’m a beginner in web and I’m using CSS grid in the structure of my page but I’m trying to position an image in the center of the screen using flexbox to make the page dynamic but I’m not getting it.

What I’m doing wrong?

HTML

<body>
  <div class="container">
      <div class="git">
         <img src="img/github.png" alt="github" class="image">
      </div>
      <div></div>
  </div>
</body>

CSS

.container {
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: 100px;
   grid-gap: 10px;

}

.git img{
   display: flex;
   align-self: center;

}
html5 css3
  • 1

    "but I’m trying to position an image on the screen using flexbox"... e? If you don’t say what you’re not getting or what you want to do, it’s hard to help.

  • opsss, I ended up forgetting the doubt, mds kkk, so what I wanted was to position the image in the center of the screen using flexbox, to make the page dynamic and maybe responsive understand ? edited the question.

  • Don’t forget to mark in the answer you best answered in your questions. Looking at your question history, none of them have been completed yet. This is bad for the community because the effort of users who dedicate time to helping other users is rewarded when the answer is marked as the best. Any doubt look at the documentation [tour].

1 answer

2


To center the image you should use the flex in the div where the image is, not the image itself, and use the property justify-content: center; to center vertically within the grid:

.container {
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: 100px;
   grid-gap: 10px;
}

.git{
   display: flex;
   justify-content: center;
}

.git img{
   align-self: center;
}
<div class="container">
   <div class="git">
      <img src="img/github.png" alt="github" class="image">
   </div>
   <div></div>
</div>

Browser other questions tagged html5 css3

You are not signed in. Login or sign up in order to post.