CSS Image position not what i wanted

Question

im trying to put my image on the middle top off my box. I'm sorry if this is a stupid question but I'm new to coding and I'm young. I searched on the code, everything's fine except this part. It makes my image is on like the middle mid, a bit on the left which is not what I want. Thanks

.profile img
{
    position: absolute!important;
    left:calc(50% - 60%px)!important;
    border: 10px solid #fff!important;
}

this is what it gives me

Somewhere it says to add "top: -60px; but it makes my image disapear instead — incarcerated, Jan 02 '21 at 01:27
If the image disappear, make sure you set the z-index property to a value above the container. I suppose you have given the container a position:relative setting. — Christian Bonato, Jan 02 '21 at 01:32
Why are you using absolute positioning? Is flexbox or grid not an option? — Roddy of the Frozen Peas, Jan 02 '21 at 01:40

score 0 · Answer 1 · answered Jan 02 '21 at 04:16

Try using Flexbox containers. Using justify-content and align-items, you should be able to put your image at the top center of your div without using absolutes. The W3 links show examples of both properties--combine them and you should achieve your desired result.

score 0 · Answer 2 · answered Jan 02 '21 at 05:00

Using margin:auto (by making img tag as display:block)

div {background: yellow; height: 400px;}
img {border-radius:50%; margin:auto;display:block;}

<div class="wrapper">
  <img src="https://picsum.photos/100" />
</div>

Using Flexbox

div {background: yellow; height: 400px; display: flex; justify-content:center;}
img {height: 100px; border-radius: 50%;}

<div class="wrapper">
  <img src="https://picsum.photos/100" />
</div>

score 0 · Accepted Answer · answered Jan 02 '21 at 05:15

0

This will also help;

.profile{
  position:relative; /* set whatever height and width to this div */
}

.profile img{
    position: absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    border: 10px solid #fff;
}

answered Jan 02 '21 at 05:15

Imran Rafiq Rather

5,459
1
9
30

CSS Image position not what i wanted

3 Answers3