0

as the title suggests, I am trying to center the source of an image in it's image tag. The images kinda must have a 212px width, and the img tag has a width of 210px.

So instead of losing both 1px collumns from the right, is it possible to lose 1 from the left and 1 from the right?

Thanks in advance.

EDIT: my image gets compressed as it seems, not cropped, which is even worse :)

1
  • Yeah answer came right after I posted (as usual). Thanks anyway. Solution was an image surrounding the div the the smaller width, overflow:hidden, and image positioned at left:-1px. Job done.
    – magtak
    Jan 20, 2012 at 11:05

3 Answers 3

2

You could add a border via CSS:

img {
    border: 1px solid white; /* or same colour as your site's background */
}


Or alternatively put a containing element around the image, e.g.

<div class="img"><img src .. /></div>

.img {
    text-align: center;
    width: 212px; 
}
1
  • I would go for the second solution with "text-align: center". This will then work with all various image sizes below 212px.
    – timing
    Jan 20, 2012 at 11:00
0

I would recommend wrapping the image tag inside a div. You would then set the div to have a width of 212px then set the image tag to have:

margin: 0 auto;

This line tells the image to have 0 margin on the top and bottom of the image and the auto parameter for the left and right margins forces the browser to center the element inside its containing element, in this case the div wrapper.

0

The best way to do this is to contain the image within a div:

<div id="image_container">
<img id="img" src="/whatever.jpg"/>
</div>

CSS:

#image_contrainer{
width:212px;
text-align: center;
}

#img{
width:auto;
margin:auto;
}

This may not be exact, but its the correct idea to do this sort of thing. Just play around until it works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.