CODEWITHSUNDEEP
csscss-float
Satch3000
Satch3000

Reputation: 49384

Images centered inside a Div with CSS

Hi have a div that's wrapping images..The width of this DIV can change so I've set it to 100%

<div id="wrapperDiv"></div>

Inside I have images/thumbnails floated to the left with a margin or the right and bottom of the image.

margin:0 10px 10px auto;

Depending on the window of the wrapper div sometimes I fit 10 thumbnail images per row and sometimes less.

I need the images to be centered so that the space in the left and right is the same.

Have can I do this with CSS?

Upvotes: 0

Views: 1343

Answers (2)

ptriek
ptriek

Reputation: 9276

I'd try adding an extra wrapper-div, with following CSS:

wrapper-inside {
    margin:0 10%;
    width:90%;
}

Or even easier (without extra div):

wrapperDiv {
    padding:0 10%;
}

EDIT:

I was thinking about this on my way to the supermarket, and realized this doesn't perfectly center the images - Viruzzo's suggestion is the only one that works:

<head>
    <style type="text/css">
    div.wrapper {
        text-align:center;
    }
    </style>
    </head>
    <body>
        <div class="wrapper">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
            <img width="200" height="120">
        </div>
    </body>
</html>

Upvotes: 2

tarmes
tarmes

Reputation: 15442

This should help you:

http://www.cssplay.co.uk/menus/centered.html

Tim

Upvotes: 0

Related Questions