Centering multiple images in a row

Discussion in 'Web Design and Development' started by Xavier, Dec 4, 2010.

  1. Xavier macrumors 68020

    Joined:
    Mar 23, 2006
    Location:
    Columbus
    #1
    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:
    [​IMG]



    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?
     
  2. definitive macrumors 68000

    definitive

    Joined:
    Aug 4, 2008
    #2
    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.
     
  3. Caleb531 macrumors 6502

    Caleb531

    Joined:
    Oct 17, 2009
    #3
    Easiest way to center everything (this goes in your CSS):

    Code:
    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.
     
  4. Xavier thread starter macrumors 68020

    Joined:
    Mar 23, 2006
    Location:
    Columbus
    #4
    I got it to work using a variation on your css. Happy!

    Thank you
     

Share This Page