CODEWITHSUNDEEP
htmlcsscss-float
Mohamed Ikal Al-Jabir
Mohamed Ikal Al-Jabir

Reputation: 89

Center floated div items

I have:

#content {
  width: 100%;
  text-align: center;
}

.item {
  float: left;
}
<div id="content">
  <div class="item"><img /><br />wordsn</div>
  <div class="item"><img /><br />stuff</div>
  <div class="item"><img /><br />asdasdasdn</div>
  <div class="item"><img /><br />Dhdfrhwon</div>
  <div class="item"><img /><br />sewfafdion</div>
</div>

I want to center these images items in the div, and have them float next to each other, and have it wrap nicely.

I have tried everything and it works in IE and breaks in Firefox so I hack some more crap and then it breaks in IE.

Upvotes: 1

Views: 8657

Answers (5)

quinti
quinti

Reputation: 25

#content .item{width:200px;margin:0 auto}

Upvotes: 0

Mohamed Ikal Al-Jabir
Mohamed Ikal Al-Jabir

Reputation: 89

Okay this is what I got to work across all browsers:

#content {
text-align:center;
}

.item {
     display: -moz-inline-box;
    display:inline-block;
}

* html .item { display:inline; }  /* for IE 6? */
* + html .item { display:inline; }  /* for IE 7? */

edit: width not required

Upvotes: 1

Pekka
Pekka

Reputation: 449803

Get rid of float and start using display: inline for the item divs.

Then you can give content a text-align: center - should work.

By the way, semantically, a structure like this might work better - depending on what those divs represent, of course.

<ul id="content">
    <li><img />wordsn</li>
    <li><img />stuff</li>
    <li><img />asdasdasdn</li>
    <li><img />Dhdfrhwon</li>
    <li><img />sewfafdion</li>
</ul>

Upvotes: 2

OdinX
OdinX

Reputation: 4221

Is this the kind of thing you are trying to achieve? (you will need to resize the page to see the wrap effect)

djgdesign.co.uk

Upvotes: 0

Aren
Aren

Reputation: 55976

.item { width: 400px; margin: auto 0; }

You need to specify a width so it can calculate the appropriate margins.

Upvotes: 2

Related Questions