CODEWITHSUNDEEP
csscss-float
Tobias Timpe
Tobias Timpe

Reputation: 770

Centering floated elements in full-width div

I'm working on a product catalog page, and the group of images needs to be centered but I have yet to find a way to do so, since they're all floated in a div that's a 100% in width.

I'm looking for a way to center those images horizontally without losing the flexibility of their floating properties.

Here's a link to the catalog on the website: http://internetvolk.de/katalog/

Upvotes: 3

Views: 2503

Answers (4)

Paradise
Paradise

Reputation: 470

#katalog {
    margin: 10px auto 0;
    overflow-y: hidden;
    max-width: 940px;
    min-width: 810px;
}

Use max-height and min-height to keep flexibility, I'm defining a max-width to keep it centered in all screens by adding margin: 0 auto;

Upvotes: 0

calebds
calebds

Reputation: 26228

Augment with the following rules:

#katalog {
    text-align: center;
}

and 

.imageLink {
    /** float: left; <-- REMOVE! */
    display: inline-block;
}

Upvotes: 2

matpol
matpol

Reputation: 3074

if you give #katalog a width - calculate this from the number of images and their margins. e.g.

#katalog{
width: 960px; /*just an example*/
margin: 0 auto;
}

Upvotes: 0

skip405
skip405

Reputation: 6279

try using display: inline-block; istead of floating and add text-align: center to their parent container)

Upvotes: 3

Related Questions