centering DIVs?

[mathias1979]

Is there a way to center a DIV in a page without having to specify margins? The reason I ask is this.

http://www4.ncsu.edu/~mpborkow/announce.html

I want the picture to have an even border on all 4 sides. If I specify a margin using percentages the left and right borders will change depending on window size. Using pixels will also yeild different results based on window size. Seems like I should just be able to do "align: center" and have the DIV centered in the page...but that doesn't work. I would just specify the image border using "border" in the img tag, but I was under the impression you can only use solid colors in that case, and not a pattern.

-Matt

[mark87]

I'm not sure I really get you...

margin: 0 auto;

...would make the DIV align horizontally. Aligning vertically is a different matter - I think it involves the use of JavaScript.

As for borders - border: 1px solid #000 ?

[cjwsb]

margin: 0px auto; will center the image in the middle horizontally. I don't really know of a method to do this vertically, though.

Chris

Mark87 beat me to it, LOL

[mathias1979]

I am talking about horizontal centering...but I think you guys missed my intent. Notice how the light blue background surrounding the picture extends all the way across the page? I don't want that...I just want it to extend away from the picture about 4px on each size. The problem using just a simple border around the picture is that I can only set a border to a solid color, unless I've been mislead. So I was trying to create the border using the DIV tag...but I can't figure out how to keep the background from extending all the way across the page on the left and right side of the picture.

-Matt

[cjwsb]

Your code is confusing to me because you're using CSS BG images and having them wrap HTML images. Go with one or the other, IMO.

Anyway, I haven't tested this, but I THINK that changing this:

#inset {align: center;
width: 100%;
margin-right: 1%;
margin-left: 1%;
margin-top: 5px;
background: url("graphics/cutecolorsbearbg2.gif");
}

To this:

#inset {align: center;
width: 60%;
margin-right: 1%;
margin-left: 1%;
margin-top: 5px;
background: url("graphics/cutecolorsbearbg2.gif");
}

I believe that will keep the light blue image centered and only a little bit beyond the sonogram image. Try different percentages and see what you get.

HTH,

Chris

[harbingerOTV]

try something like this


#picture {
text-align: center;
margin: 0 auto;
background: url("graphics/cutecolorsbearbg3.gif");
width: 562px;
height: 428px;
}
#picture img {
margin: 4px;
}


<div id="picture">
<img src="pictures/profile.jpg">
</div>