positioning image using css

Question

hi, i really need to place an image somewhere in the page (100 pixels from the left side for example) but i want to control where the center of the image will be, when i use left:100px; , the image is positioned 100px from its left edge and not from its center...

is there a way i can choose where the center of the image will be and not the left/right edge?

Answer 1

No items are always placed from their top-left corner. If you know the width of the image, this should be easy to account for.

If your image size is dynamic, it may be best to do this type of positioning using Javascript.

Answer 2

[I'm assuming image width is not know in advance, otherwise solution would be obvious]

I guess your best option is to put it in an element with fixed width and center it inside that. Of course, this has obvious drawbacks if image width is unlimited and can exceed container element width.

Answer 3

Do you know the width of the image or does it vary?

If you know the width, you can set the position and then back the margin off. For example, if you wanted to center it in the middle of the page you could use this:

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

if your image was 100x50px.

Answer 4

Here's an approach. You wrap the image in a div, and then position the div where you want it, float it left so that it collapses to fit it's contents. Then margin-left: -50% the image itself...

  <div style="position: relative; left: 300px; border: 1px solid red; float: left">
      <img src="#" style="position: relative; margin-left: -50%"/>
  </div>

Demo