How to show image center of the div in css

Question

Trying to show the image center of the div using text-align: center; But not working. Also i have tried using

display: flex; justify-content: center;

But not working. How to resolve this issue?

app.component.html:

    <div class="box">
    <div class="grid1">
    <div class="grid2">
      <img src="https://assets.stickpng.com/thumbs/585e4d1ccb11b227491c339b.png" height="24" width="24"/>
    </div>
    <div class="grid3">Content</div>
    </div>
    </div>

app.component.css:

.box {
  position: relative;
  clear: both;
  padding: 13px;
  background-color: #fff;
  border-radius: 0px 8px 8px 8px;
  height: 100%;
  min-height: 25px;
}

.grid1 {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 0px;
  border: 1px solid black;
  min-width: 97.5px;
  height: auto;
  margin-left: 12px;
  float: left;
}

.grid2 {
  margin: 3px 1px 1px 1px;
  border: 1px solid red;
  height: 24px;
  font-size: 7px;
  width: 23.4px;
  float: left;
  min-height: 62px;
  /* display: flex;
  justify-content: center;
  text-align: center; */
}

.grid3 {
  margin: 3px 1px 1px 1px;
  border: 1px solid red;
  height: 62px;
  font-size: 7px;
  min-width: 64.35px;
  float: left;
}

Demo: https://stackblitz.com/edit/angular-ivy-uy4bgp?file=src%2Fapp%2Fapp.component.css

To center with Flexbox, you need `justify-content: center; align-items: center;`. — ralph.m, Aug 31 '23 at 04:54
@ralph.m: Not working: https://stackblitz.com/edit/angular-ivy-yn3svp?file=src%2Fapp%2Fapp.component.css — Pakal Nilavu, Aug 31 '23 at 04:57
You need `display: flex` as well. (Sorry, I took it for granted that you'd realize that.) — ralph.m, Aug 31 '23 at 05:01
Not a fix but note that the [](https://html.spec.whatwg.org/dev/embedded-content.html#the-img-element) tag does not use and does not need a closing slash and never has in any HTML specification. — Rob, Aug 31 '23 at 07:21

score -1 · Answer 1 · answered Aug 31 '23 at 07:30

Use the the display: flex approach since it's generally better for centering both horizontally and vertically. You should apply the display: flex property to the .grid2 div and remove any unnecessary float properties. Here's how you can modify your CSS:

.grid2 {
  display: flex;
  justify-content: center;
  align-items: center; /* This centers vertically as well */
  border: 1px solid red;
  height: 24px;
  font-size: 7px;
  width: 23.4px;
  /* float: left; Remove this line */
  min-height: 62px;
}

By adding display: flex to .grid2, the justify-content: center centers the content horizontally, and align-items: center centers it vertically within the div.

score -1 · Accepted Answer · answered Aug 31 '23 at 09:01

.img {
  width: 300px;
}

.content {
  border: 1px solid;
  padding: 15px;
  display: flex;
  justify-content: center;
}

<div class="content">
  <img class="img" src="https://w0.peakpx.com/wallpaper/424/814/HD-wallpaper-nature-nature.jpg" alt="nature images">
</div>

use flex, the image will show centering both horizontally and vertically. please try this

How to show image center of the div in css

2 Answers2