Center gefloateten div-Elemente

Habe ich:

CSS:

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

.item {
  float: left;
}

HTML:

<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>

Möchte ich center diese Bilder Elemente in der div und float neben einander, und haben es wrap schön.

Ich habe alles versucht und es funktioniert im IE und bricht in Firefox so ich hack einige mehr Mist und dann bricht es in IE.

InformationsquelleAutor Mohamed Ikal Al-Jabir | 2010-06-18
  1. 2
    .item { width: 400px; margin: auto 0; }

    Müssen Sie angeben, in einer Breite, so kann er berechnen, die entsprechenden Margen.

    • dieser arbeitet mit einer festen Breite nur. Oft unpraktisch.
    • das fast funktioniert, aber im IE gebrochen
    • Sie schwimmt noch? Es sollte funktionieren in I. E.
    InformationsquelleAutor Aren
  2. 2

    Loszuwerden float und starten Sie mit display: inline für die item divs.

    Dann kannst du content eine text-align: center - sollte funktionieren.

    Durch die Art und Weise, semantisch, eine Struktur wie das besser laufen könnte - je nachdem, was diejenigen, die divs darstellen, natürlich.

    <ul id="content">
    <li><img />wordsn</li>
    <li><img />stuff</li>
    <li><img />asdasdasdn</li>
    <li><img />Dhdfrhwon</li>
    <li><img />sewfafdion</li>
</ul>
    • diese Lösung funktioniert nicht, sogar tho es scheint, wie es sollte. Ich habe versucht, inline-block (das ist näher an, was gebraucht wird) und solche, die IE nicht funktioniert. Dies ist ein sehr heikles problem, das ich habe versucht, viele Dinge.
    • dann verstehe ich nicht, Ihre Frage vollständig - ich bin mit dieser Methode alle über und Sie funktioniert einwandfrei. Was genau funktioniert nicht?
    • Ich möchte viele pro Zeile dies ist nur die Angabe von nur 1 oder nicht zentrieren, je nachdem, wie ich mischen
    • sorry, habe ich übersehen das <br> s. Befreien Sie sich von Ihnen und es wird funktionieren.
    • Ich meine, es funktioniert nicht in allen Browsern auch, ich denke, wenn Sie machen können inline-block im IE6 funktioniert
    • warum nicht schlicht inline für Sie arbeiten?
    • Ich habe problem gelöst-post-Lösung
    • die einfachen inline funktionierte nicht in einigen älteren Browsern und auch neuere, für wierd Grund
    • Ich denke, das ist lösbar, aber trotzdem, Sie scheinen zu haben eine funktionierende Lösung, so ist es fein.

    InformationsquelleAutor Pekka supports GoFundMonica
  3. 1

    Okay, das ist was ich habe zu arbeiten für alle Browser:

    #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: Breite ist nicht erforderlich

    • Ich denke immer noch, dies könnte gelöst werden, indem eine einfache display: inline für alle Browser - wenn die Elemente nicht haben, um eine Feste Breite. Aber wenn dies für Sie funktioniert in allen Browsern alles in Ordnung!
    • warten Sie nicht, Breite für den IE6. Gott verdammt.
    InformationsquelleAutor Mohamed Ikal Al-Jabir
  4. 0

    Ist dies die Art von Sache, die Sie versuchen zu erreichen? (Sie benötigen, um die Größe der Seite, um die wrap-Effekt)

    djgdesign.co.uk

    • diese sind Links ausgerichtet
    • Ah sorry, hatte nicht gelesen, dass Teil deiner Frage richtig
    InformationsquelleAutor vimist
  5. 0
    #content .item{width:200px;margin:0 auto}
    InformationsquelleAutor quinti
Schreibe einen Kommentar