[Solved] Center image above the box

[Romchick]

Guy, here I am again!

Here is the goal. And the question is how to center the round of image? Cuz it not the real center. It always alittle bit to the left or to the right… The solution is obvious, but cant see a thing.

[Paulie_D]

.new img {
display: block;
margin: 0 auto;
}

should do it.

[Romchick]

No, I mean not the exect image, but the .new class…

[Paulie_D]

Oh…

.new {
width: 40px;
height: 40px;
padding: 10px;
border-radius: 50%;
background: #6699cc;
display: flex;
position: absolute;
justify-content: center;
align-items: center;
/* top: -30px; */ <-- remove this 
/* lefft: 40%; */ <-- remove this 
top: 0;
left: 50%;
transform: translate(-50%,-50%);
}

[Romchick]

and the hover effect ? 8)))

[Paulie_D]

and the hover effect ?

What about it?

[Romchick]

When hovered .new uses transform: rotateY(360deg);

[Paulie_D]

Oh…well, I’m sure that could all be worked out (applying both at the same time) but instead, if you want a quick fix just use

.new {
  width: 40px;;
  height: 40px;
  padding: 10px;
  border-radius: 50%;
  background: #6699cc;
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 50%;
  margin-top: -30px; /* 50% of total height */
  margin-left: -30px; /* 50% of total width */
}

Less ‘automatic’ but it works.

[Romchick]

Just the way I needed! Thanks!

[Romchick]

No problem! Let it be used! )

[Author]

Posts