Centering multiple images in a row

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

  1. Xavier macrumors 68030

    Mar 23, 2006
    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.

    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


    Aug 4, 2008
    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


    Oct 17, 2009
    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.
  4. Xavier thread starter macrumors 68030

    Mar 23, 2006
    I got it to work using a variation on your css. Happy!

    Thank you

Share This Page