Centering multiple images in a row

[Xavier]

I am fairly new to html/css and need some help!

I am constructing a personal website to house my resume and content that I have accomplished over my college career.

What I would like to do is have multiple images, not overlapped, in a row, but also have them always centered in the page. Here is what I have in mind:

Also here is some code that i am using for text. I want the images to behave the same way, but be in a row.

#caption2
{
font-size: 50px;
font-family: "Tall Films";
margin-left: -300px;
text-align: center;
position: absolute;
top: 15%;
left: 50%;
width: 600px;
height: auto;
visibility: visible;
display: block
}

Any help?

 

[definitive]

hm, there are several ways of doing it. i don't have the time to code the stuff at the moment, but off the top of my head, you could probably use an unordered list to have the boxes listed inline (horizontally) inside a wrapper, and space them apart with something like "padding-right: 5px;" for the li tag.

 

[Caleb531]

Easiest way to center everything (this goes in your CSS):

body, body * {
text-align: center;
margin-left: auto;
margin-right: auto;
}

Just make sure the images are all next to each other in your HTML.

 

[Xavier]

I got it to work using a variation on your css. Happy!

Thank you