Zentriere eine automatische Breite div?

Ich habe Schwierigkeiten, weil ich habe einen div möchte ich center und dem, was ich habe
in der Regel wurde gesagt, zu tun, ist dies:

width: 700px;
margin-left: auto;
margin-right: auto;

das Problem ist, dies ist für, wenn Sie wollen, dass der div eine Feste Breite. Ich will die div
um seine Größe anpassen, basierend auf den text in der div, und immer noch zentriert werden. Ich habe versucht:

width: auto;
margin-left: auto;
margin-right: auto;

aber das hat nicht funktioniert. Es streckt das div zu füllen den Bildschirm, wenn ich dies tun.

Wer weiß, was hier zu tun ist?

InformationsquelleAutor der Frage Dan K | 2013-08-30

  1. 36

    für den übergeordneten block oder Körper - text-align:center;
    für centerd block- display:inline-block;

    .center{display:inline-block;background:red}
body{text-align:center}

<div class="center">
    <p contenteditable="true">write text</p>
</div>

    DEMO http://jsfiddle.net/RXP4F/

    Inhalte Bearbeitbar MDN

    InformationsquelleAutor der Antwort zloctb

  2. 8

    haben Sie versucht, den Ansatz der hier gezeigt?
    http://www.tightcss.com/centering/center_variable_width.htm

    grundsätzlich.
    stellen Sie Ihre Inhalte in einem gefloateten div
    setzen, schwebte div innerhalb eines anderen gefloateten div

    setzen Links: 50%, position in Bezug auf äußere div
    setzen Sie die linke: -50%, position in Bezug auf den inneren div

    schließlich, nest alles in eine weitere div mit overflow:hidden

    .outermost-div{
    background-color: blue;
    overflow:hidden;    
}

.inner-div{
   float:left;
   left:50%;
   background-color: yellow;
   position: relative;
}

.centerthisdiv {
   position:relative;
   left: -50%;
   background-color: green;
   float:right;
   width:auto;
}

    hier mein jsfiddle Demo:
    http://jsfiddle.net/wbhyX/1/

    InformationsquelleAutor der Antwort shinjin

  3. 4

    Verwenden margin:
    0px auto; and display: table;
    Es gibt beispielsweise:
    https://jsfiddle.net/da8p4zdr/

    InformationsquelleAutor der Antwort Kale

  4. 3

    Möchten Sie vielleicht versuchen, CSS display:table-cell oder display:table

    InformationsquelleAutor der Antwort Samuel Liew

  5. 3

    Versuchen, diese Struktur.

    <div class="container">
    <div class="center_div">

    </div>
</div>



.container{
    float: left;
    left: 50%;
    position: relative;
}
.center_div{
   position: relative;
   left: -50%;
   float: left;
}

    InformationsquelleAutor der Antwort Sharath Daniel

  6. 0

    BEARBEITET:

    verwenden table ist, könnte es leichter sein, um Stil. Dann fügen Sie div in die tr

    InformationsquelleAutor der Antwort Daniel Cheung

  7. 0

    .outer-container {
    position: relative;
    left: 50%;
    float: left;
    clear: both;
    margin: 10px 0;
    text-align: left;
    }

    .inner-container {
    Hintergrundfarbe: rot;
    position: relative;
    Links: -50%;
    text-align: left;
    }

    InformationsquelleAutor der Antwort Kursat Turkay

  8. 0

    zloctb Antwort am Aug 30 '13 bei 4:14 hat tatsächlich funktioniert im Prinzip, aber unvollständig war. Wenn Sie möchten, dass Ihre element-Breite auf "auto" bezogen auf den Inhalt, der innerhalb es UND zentriert innerhalb des übergeordneten, ABER mit dem Inhalt des KIND-element Links ausgerichtet, Folgendes tun (denn es ist wirklich der einfachste Weg):

    .parent {
  width: 100%;
  text-align: center;
}

.parent div.child {
  display: inline-block;
  text-align: left;
  width: auto;
}

    (Natürlich, wenn Sie nur wollten, dass alles streng zentriert, würden Sie nicht brauchen, den code für das child-element.)

    InformationsquelleAutor der Antwort Margaret JB

Schreibe einen Kommentar