Center div-Element und passen die Inhalte?

Möchte ich zentrieren einer div in der Mitte meiner Seite, und haben die div dem Inhalt anzupassen. Wie kann ich das tun?

Habe ich versucht,

width: 1px;
white-space: nowrap;
margin: 0 auto;

Die zentriert das div, aber dann den ganzen text auf die Rechte Seite.

display: inline-block macht das div-Element dem Inhalt anzupassen, aber dann margin: 0 auto; scheint nicht zu funktionieren...

Gut, wenn Sie es inline-block dann müssen Sie text-align:center auf Eltern, um es...
Sollte dies geschrieben als Antwort....Ich würde Sie das Häkchen. Edit: Oh..du hast 😉

InformationsquelleAutor mpen | 2010-12-15

  1. 15

    Macht diese Arbeit für Sie: http://vidasp.net/tinydemos/inline-centered-div.html

    body { text-align:center; }
div { display:inline-block; }
    Das macht alles auf der Seite zentriert.
    Es ist nur eine demo. Auf der Seite, die OP ist zu definieren text-align:center auf das DIV-Element des parent-Elements (also nicht das BODY-element in seinem Fall).
    Ja, ja, es funktioniert. Obwohl ich werde wickeln Sie es in ein extra div setzen und die text-align:center auf, statt, und dann habe ich einfach text-align:left auf das innere div.
    Ja, das ist der Weg, es zu tun.

    InformationsquelleAutor Šime Vidas

  2. 4

    In der Regel, wenn Sie möchten, center text, Sie würde ein container, der über die container, in denen Sie zentrieren und einstellen text-align: center;.

    CSS:

    #container {
    text-align: center;
}

    HTML:

    mein text

    Wenn Sie möchten, dass ein container, der die Größe um den text, für die Zwecke der ein farbiger hintergrund oder Rahmen, stick in einen inneren container.

    CSS:

    #container {
    text-align: center;
}

#inner_div {
    display: inline;
    /*other styles here*/
}

    HTML:

    <div id="container">
    <div id="inner_div">my text</div>
</div>

    InformationsquelleAutor Surreal Dreams

  3. 0

    Der einzige Weg, dies zu tun -, javascript-Lösungen abgesehen, ist ihm eine Breite und legen Sie Ihren linken und rechten Rand auf auto:

    <div style="margin-left:auto;margin-right:auto;width=80%">...</div>

    Alle anderen Lösungen wird mess up your inner text.

    Ich möchte zu dem Inhalt anzupassen, nicht eine % - Breite.

    InformationsquelleAutor Blindy

  4. 0

    Der text ist auf der rechten Seite wegen der Breite:1px. Stellen Sie einen größeren Breite.

    ...ja, ich verstehe warum, aber "eine größere Breite" nicht erfüllt "fit Inhalt" Voraussetzung.

    InformationsquelleAutor Mr. TA

  5. 0

    Versuchen display: table;

    div { 
    display: table; 
    margin: 0 auto;
}

    InformationsquelleAutor chenaren

  6. 0

    Flexbox sollte den trick tun:

    .container {
        display: flex;
}

.centeredDiv {
        display: inline-block;
        margin: 0 auto;
}

    InformationsquelleAutor A. A. Mahouk

Schreibe einen Kommentar