Wie kann ich einem div automatisch gesetzt, es eigne Breite?

Wie kann ich ein DIV-Breite Verhalten sich, wie wenn float:left gesetzt ist, aber ohne einen float? width:auto nicht scheinen, es zu tun (in chrome).

Ich versuche, so etwas wie den folgenden zu arbeiten...

.center
{
    margin-left: auto;
    margin-right: auto;
    width: auto;
}
InformationsquelleAutor Justin808 | 2011-04-19
  1. 38

    Lösung mit inline-block

    Könnten Sie versuchen display: inline-block und sehen, ob das in Ihrer situation funktioniert. Allerdings werden Sie nicht in der Lage sein, um es mit margin-left: auto & margin-right: auto weil diese Technik erfordert eine Breite Wert.

    Wenn möglich, verwenden Sie display: inline-block - und set - text-align: center auf container.

    <div style="text-align: center">
  <div style="display: inline-block;">
     This will expand only as far as it needs to
  </div>
</div>

    Lösung mit Flexbox - + div-container

    Die ursprüngliche Antwort oben wurde geschrieben im Jahr 2011, vor flexbox implementiert wurde. Sie können einen ähnlichen Effekt erzielen

    <div style="display: flex; justify-content: center;">
  <div>
     This will expand only as far as it needs to
  </div>
</div>

    Lösung ohne div-container

    Es ist ein weiterer Weg, dies zu tun, ohne ein übergeordnetes element.

    1. Set display, um inline-block um die div-Breite passen zu Ihrem Inhalt.
    2. Verwenden position: relative und left: 50% an-position den linken Rand auf 50% des enthaltenden Elements.
    3. Verwenden transform: translateX(-50%) die "shift" - dem element auf der linken Seite von der Hälfte seiner eigenen Breite.
    .center {
  display: inline-block;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
    • hmm... das legt die Breite richtig, aber die Margen dont center das div jetzt.
    • richtig, das ist, warum ich sagte, dass Sie hätte hinzufügen text-align: center für den div-container.
    • Ich denke, ich kann hinzufügen, ein weiterer wrapper für die text-align aber wenn möglich würde ich eher nicht haben, hinzufügen einer anderen Ebene der Verschachtelung. Kennen Sie noch andere Möglichkeiten, zum zentrieren einer div von unbekannt Breite?
    • Ich nicht. Bedeutet nicht, gibt es nicht.
    InformationsquelleAutor jessegavin
  2. 5

    Für diejenigen von Euch, die noch kommen über dieses Problem, heutzutage kann man handhaben mit:

    <div>
  <div style="display: table; margin: auto">
    This will expand only as far as it needs to
  </div>
</div>

    Hier ist eine neue Geige auf der Grundlage der akzeptierten Antwort: http://jsfiddle.net/j33qL8pa/1/

    InformationsquelleAutor kayakyakr
  3. 4

    Ich denke, das funktioniert heutzutage:

    .center
{
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}
    InformationsquelleAutor jiggunjer
  4. 3

    <div>s sind block-Elemente. Sie nehmen die volle Breite Ihrer Container. Zeitraum. Wie <body> oder <html>

    Ihre Regel oben ist im wesentlichen dies:
    div { width:100%; margin:0 auto; } als 100% ist Ihr auto Wert.

    inline-block funktionieren würde, aber es wird nicht funktionieren, genau wie ein echter inline-block element.

    Im Grunde...man kann es nicht ohne eine Breite, Positionierung.

    Wenn Sie gehen die inline-block-Strecke, geben Sie diese ein, Lesen...können Sie am Ende kämpfen einige unerwartete Schlachten mit Ihren CSS-Erwartungen.

    http://www.brunildo.org/test/InlineBlockLayout.html (link gefunden in der Nähe der Unterseite der folgenden msdn-Seite)
    http://msdn.microsoft.com/en-us/library/ms530751%28v=vs.85%29.aspx

    InformationsquelleAutor Dawson
Schreibe einen Kommentar