Centering Images

[lahmayes]

This problem is kind of rediculous i'm not sure why i cant find a solution. But anyways, i've got a div with two images in it, and i want them to be centered. heres my code:


<div style="
width: 100%;
position: relative;
margin-left: auto;
margin-right: auto;
padding: 20px;
">
<img src="http://www.alabu.com/ibc/images/photos/projects/cornell-ezranet/cornell-one.jpg" alt="Ezranet Communications Project" />
<img src="http://www.alabu.com/ibc/images/photos/projects/cornell-ezranet/cornell-two.jpg" alt="Ezranet Communications Project" />
</div>


i've tried all kinds of stuff, i cant use an align attribute inside the div instance b/c i'm using XHTML 1.0 strict. how do i center them?
(note: they do center if your screen is small enough, especially in IE, but in mozilla if your resolution is big then they dont center, they stack on top of each other on the right of the page. you can see this at www.alabu.com/ibc/projects/cornell-ezranet.html)

[David Harrison]

How about just:
<div style="text-align:center;">
<img src="http://www.alabu.com/ibc/images/photos/projects/cornell-ezranet/cornell-one.jpg" alt="Ezranet Communications Project" />
<img src="http://www.alabu.com/ibc/images/photos/projects/cornell-ezranet/cornell-two.jpg" alt="Ezranet Communications Project" />
</div>

[lahmayes]

mmm still doesnt align center. It seems to float right :-/ i havent tested it in IE yet but its the same behavior in Firefox.

[David Harrison]

Works fine for me in FF and IE.

[lahmayes]

yeah it only does it now when your resolution is larger than 1024*768 (mine is currently 1280*1024)

EDIT: this page (http://www.alabu.com/ibc/projects/rochester-resnet.html) aligns right even at lower resolutions (i think because the picture is smaller)