0

I used display: flex and justify-content: center to center the img within the div, it did in fact center the img but it shrank the img to a very small size. How do I center the img without having it shrink? I included a picture of this. I also tried re-sizing it with .img-star img { width: 3em; }, but it doesn't work. Pls help thanks.

enter image description here

.img-star {
  border: 1px solid white;
  padding: 20px;
  margin: 30px;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
}
Minimumspace
  • 341
  • 2
  • 21
zcode97
  • 13
  • 2

4 Answers4

0

Not use flex. Use this CSS:

div {
  text-align: center;
}
Tachibana Shin
  • 2,605
  • 1
  • 5
  • 9
0

Don't use flex. just use this on your div

div {
  text-align: center
}
Ihyaulhaq Maulana
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Aug 13 '22 at 09:37
0

Adding the align-items: center property could potentially fix it. It will also center the image vertically, if that is wanted.
I tried it with a div and it worked as intended It also appears to be fixing distorted images, such as this answer

img-star {
  border: 1px solid white;
  padding: 20px;
  margin: 30px;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}
science fun
  • 401
  • 4
  • 8
0

set img display to block and set left + right margins to auto, e.g.

.img-star {
    margin: 30px auto;
    display: block;
    padding: 20px;
    border: 1px solid white;
    border-radius: 50%;
    width: 45px;
    height: 45px;
}

You have also set the width of this class at 45px, so when this class is applied to an img it will be shrinking it to 45px. Try upping the width and height. width: 100%; height: 100%; will preserve your original image size to the max size of the block the image is in. Changing it based on px or em will set it to that e.g. width: 300px;.

meadowland
  • 26
  • 4