CODEWITHSUNDEEP
htmlcssimagepositioningcenter
Matteo Monti
Matteo Monti

Reputation: 8930

Position the center of an image using css

let's say I have to place an image RIGHT in a proper spot, but I need its CENTER to be in that spot. I wanted to place an image in the top-left corner of a div, so I placed the image in the div, gave position: relative to the div and position: absolute to the image then set its top and left values to 0. It quite worked but I'd need the CENTER of that image to be right over the top left corner. I'd do it manually setting top: -xpx, left: -ypx BUT I don't have any specific value for the image size (which could vary a lot). So is there any way to say something like: position: absolute-but-i'm-talking-about-the-center; top: 0px; left: 0px;?

Thank you very much indeed!

Matteo

Upvotes: 2

Views: 1162

Answers (5)

Sebastian
Sebastian

Reputation: 528

Probably one of the simplest solutions is to place the image in the upper left corner at position left: 0px; top: 0px; and then use translate to move its center to this position. Here's a working snippet for that:

#theDiv {
  position: absolute;
  left: 100px;
  top: 100px;
  background: yellow;
  width: 200px;
  height: 200px;
}
#theImage {
  background: green;
  position: absolute;
  left: 0px;
  top: 0px;
  transform: translate(-50%, -50%);
}
<div id="theDiv">
<image width=31.41 height=41.31 id="theImage"></image>
</div>

Upvotes: 0

Yeti
Yeti

Reputation: 2845

No need to use Javascript, this can be done in CSS.

The required HTML: (you must change the div to an img obviously)

<div id="container">
  <div id="imgwrapper">
    <div id="img">Change this div-tag to an img-tag</div>
  </div>
</div>

The required CSS:

#container
{
  position: absolute;
  left: 200px;
  top: 100px;
  height: auto;
  overflow: visible;
  border: 2px dashed green;
}
#imgwrapper
{
  position: relative;
  margin-left: -50%;
  margin-top: -50%;
  padding-top: 25%;
  border: 2px dashed blue;
}
#img
{
  display: block;
  width: 200px;
  height: 100px;
  border: 2px solid red;
}

Click here for a jsFiddle link

The margin-left: 50%; obviously works when using the container div, because the width of the container will be exactly that of the content. (You might need to add width: auto;) But margin-top: -50%; will not work because the height of the container div will change with it, thus you need yet another wrapper div in which you use this margin-top: -50%; and then you need to fix this error it makes by using a positive percentage based padding. Obviously there may be other solutions to fix this, but the solution should be something like this.

Upvotes: 0

pzin
pzin

Reputation: 4248

You should wrap the image in another block element and put a negative left position to the image.

Something like this:

<div id="something">
  <div class="imagewrap">
    <img>
  </div>
</div>

Then give #something a relative position, .imagewrap an absolute, etc... And img should have a relative position with left:-50%. Same for the top.

Upvotes: 1

Jon Taylor
Jon Taylor

Reputation: 7905

You could use javascript yo get the size of the image and then set the css left value needed.

Be mindful of the way images are loaded though as they are asynchronous so will not necesserily be available when the document is ready. This means that unless you handle the images correctly you will end up with width and height dimensions of 0.

Upvotes: 1

Jeffers
Jeffers

Reputation: 3

have you tried;

name_of_div_with_image {
display: block;
margin-left: auto;
margin-right: auto }

give that a go.

Upvotes: 0

Related Questions