Zentrieren einer äußeren div 'text-align:center' funktioniert nicht wie erwartet

Habe ich einen Abschnitt, der Inhalt in ein div, und das ist derzeit zentriert auf der linken Seite. Fiddle.

Habe ich versucht, indem ein div-container wie: 

<div style='text-align:center; width:100px;'>[content]</div>

Aber kein Glück. Auch dies versucht: 

<div style='margin: 0px auto; width:100px;'>[content]</div>

Inhalt ist immer noch Links ausgerichtet.

Dies funktioniert, aber ich möchte den richtigen Weg zu finden, um das auch mit CSS machen: 

<div style='width:100px;' align='center'>[content]</div>

Hilfe dankbar. Ich bin geneigt, dies zu tun mit Tabellen, aber ich muss ausbrechen aus alten Gewohnheiten!

  • es gibt eine Menge von markup, css und inline-styles in Ihrer fiddle; es ist ein wenig schwer zu square mit Ihrem Frage. ist es die <div class="menu"> Sie suchen die Mitte?
  • Ich bin zu wollen, um die Mitte der weißen Fläche (mit abgerundeten Kanten). Ich will nicht zu ändern Sie die Ausrichtung von irgendetwas in diesem Bereich - muss nur den gesamten weißen Bereich zentriert.
  • Das bedeutet also, Sie wollen <div class="rounded-corners" style="width: 600px; background-color:#FFFFFF;"> zentriert werden? Oder den Inhalt auf zentriert? So oder so, Sie sollten in der Lage sein, um die Mitte der div mit der seitlichen Ränder der auto oder den Inhalt mit text-align: center, wie viele betont haben unten.
  • Sollte ist hier das Schlüsselwort. Das problem ist, dass text-align:center funktioniert nicht in meinem Beispiel. Dies wäre so viel einfacher, das Layout mit Tabellen, aber ich muss lernen, den richtigen Weg.
  • text-align nicht center divs... es zentriert den text...
  • Hier ist eine vereinfachte version von dem gleichen Beispiel: jsfiddle.net/79x2a/7
  • Wie ich sagte, auf meine Antwort da unten: jsfiddle.net/79x2a/8
  • Sie bearbeitet Ihre Antwort, bevor ich es sah. Die aktualisierte Antwort funktioniert.
  • Das ist, warum ich wies Sie es =)

InformationsquelleAutor a coder | 2013-01-22
  1. 9

    Wenn Sie versuchen, den äußeren div mittig Bezug zum übergeordneten (bodyin diesem Fall) sollten Sie seine seitlichen Ränder auf auto:

    body div{
    margin: auto;
}

    wie Sie sehen können hier

    • Sprengt layout: jsfiddle.net/79x2a/2
    • das ist nicht richtig.
    • woah, so hilfreich. Was versuchen Sie zu zentrieren?
    • das div-Element und nicht der Inhalt
    • probieren Sie die neuen Bearbeiten
    • Ok, das funktioniert besser. Ist dies der beste Weg zu erreichen, was ich will? Ist es gerecht "standards"?
    • Solange ich weiß, dass es das beste und mehr standard treffen... und es ist die, die ich habe mit in letzter Zeit.

    InformationsquelleAutor Manuel Miranda
  2. 3

    Dem tool-center ein div ist eigentlich margin: 0 auto;.

    • Mitte ein div, aber nicht der Inhalt
    • jsfiddle.net/79x2a/3 no dice
    • mein code ist korrekt für das zentrieren eines div-Element und nicht der Inhalt
    • was versuchen Sie zu zentrieren?
    • ich weiß, die OP ' s Frage über das zentrieren von Inhalten...
    • Sie können es verwenden, für Inhalte zu

    InformationsquelleAutor Ilan Biala
  3. 0

    Wickeln Sie die Inhalte mit anderen div innen "abgerundeten Ecken".

    Und schreiben style="width: 100%; margin: 0 auto;" für dieses neue div

    InformationsquelleAutor DruDro
Schreibe einen Kommentar