CODEWITHSUNDEEP
htmlcssjsfiddle
adit
adit

Reputation: 33674

Centering div's child element

I have the following js-fiddle. It's basically just a div that has a bunch of square child elements. The issue is that the div doesn't always stay centered. I've already set the following CSS:

.boutique-grid {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

I am not sure why it's not centering the child element div's. Any idea?

Upvotes: 0

Views: 101

Answers (6)

codingrose
codingrose

Reputation: 15709

Set width of div and image.

.boutique-grid {
    width: 300px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

Upvotes: 0

Anton Eprev
Anton Eprev

Reputation: 21

This is what the spec says about float:

The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property).

This is why .boutique-grid-column becomes block when float is specified and ignores text-align.

Upvotes: 0

jono
jono

Reputation: 1842

Remove float:left; and this will work fine, you already have display:inline-block; set so no need to float the element.

http://jsfiddle.net/wy7rd/3/

Upvotes: 0

Pascalz
Pascalz

Reputation: 2378

.boutique-grid {
    text-align: center;    
}

.boutique-grid-column {
    ...
    margin: 0 auto;    
}

Upvotes: 0

thmshd
thmshd

Reputation: 5847

The boutique-grid is centered, but it's 100% wide. You can set a width to for example, 710px;

.boutique-grid {
  overflow: hidden;
  width: 710px;
}

Upvotes: 0

Ganesh Pandhere
Ganesh Pandhere

Reputation: 1652

Remove float left from your .boutique-grid-column class. It will solve the issue.

Upvotes: 3

Related Questions