Question

I’m trying to display an image centered on a page with a border that should have different paddings and margins on it’s side. The images will be of different widhts and heights. So I need it to stretch accordingly.

I put this in the body to remove all margins:

body {
    margin:0px 0px;
    padding: 0px;
    }

Then I used this to put the border around the image.

#imgcontainer {
    position:relative;
    text-align: center;
    border-color: red;
    border-width: 1px;
    border-style: solid;
    padding: 5px;
}

But then the border stretches all across the with of the page. Is there any way to prevent his? If I put:

position:relative;

The border snaps into place but then the image is not centered anymore.

If I put a container box around #imgcontainer it also snaps to the edge of the page.

I think it can be solved simply with some combo of position:relative/absolute?

This is what I’m talking about: http://kareldc.com/dislexicon/1-motion.html

Thx!

Answer 1

Hi now define according to @Fabrizo Calderan

css as like this

#imgcontainer {
display:inline-block;
vertical-align:top; 
}

than your result is