Its_ToXiiC Its_ToXiiC - 3 months ago 12
CSS Question

Image not centered with 50%

I have an image set to

left: 50%;
. However, it's a little too far to the right, like the selector is not in the center, but on the left side.

My CSS Code:

#scroll-down {
position: fixed;
width: 100%;
height: 64px;
margin-top: -64px;
}

#scroll-arrow {
position: absolute;
background: url("img/down-arrow.png") center no-repeat;
width: 64px;
height: 64px;
left: 50%;
}


My HTML Code:

<div id="scroll-down">
<div id="scroll-arrow"></div>
</div>

Answer

to make the image exactly on center, you need to put some margin-left with value is minus half of your image width.

Please try this code

#scroll-down {
  position: fixed;
  width: 100%;
  height: 64px;
}

#scroll-arrow {
  position: absolute;
  background: url("http://placehold.it/100x100") center no-repeat;
  width: 64px;
  height: 64px;
  left: 50%;
  margin-left: -32px; /* value -32px comes from (width / 2 * -1) */
}
<div id="scroll-down">
  <div id="scroll-arrow"></div>
</div>