After changing the image, the CSS style of the image is invalid

Question

At first, my picture is like this, the avatar can be displayed in the center。

enter image description here

And the CSS code for class .avator is:

.idx_box .search_box .avator {
  width: 0.64rem;
  height: 0.64rem;
  border-radius: 50%;
  background: #feb5b4;
}

The CSS code for img is：

.idx_box .search_box .avator img {
   width: 0.3rem;
   height: 0.3rem;
   margin: 0 auto;
   -webkit-transform: translateY(45%);
  -ms-transform: translateY(45%);
  transform: translateY(45%);
}

where 1rem is equal to 100px；

However, when I changed the picture, the horizontal centering effect didn't work. The CSS code is still the same as above and has not changed. I can't find the reason. Picture as shown：

enter image description here

Thanks！

can you also add the HTML for your CSS? Images don't count. Best would be if you can create a snippet in your question so we can see your problem. — cloned, Oct 12 '22 at 06:13
Thanks,I wrapped the image in a div.Then fill the box with the picture to achieve the effect. — Tracy-sub, Oct 25 '22 at 05:47

score 0 · Answer 1 · answered Oct 12 '22 at 08:32

0

Just add this 'text-align:center;' to .avator class.

I think the reason it didnt work, was because the image wasnt centrally aligned in the first instance. This showed in the second instance when you put a smaller image.

By the way, this 'margin: 0 auto;' inside the img, does nothing.

answered Oct 12 '22 at 08:32

Dan Friedman

195
6

Thanks,I wrapped the image in a div.Then fill the box with the picture to achieve the effect. – Tracy-sub Oct 25 '22 at 05:45

After changing the image, the CSS style of the image is invalid

1 Answers1