Keine center-div-Element auf bootstrap 3

Ich bin nicht in der Lage zu Zentrum eine Menge div-seit ich ein upgrade meines bootstrap von 2.1 zu 3.0

Beispielsweise mit diesem code:

<div id="center" class="container">
    <div class="row">
        <div class="btn-toolbar">
            <div class="btn-group">
                <a class="btn btn-default" href="#">test</a>
            </div>
        </div>

        <br />

        <p>Am I centered ?</p>
        <a class="btn btn-default" href="#">Back</a>
    </div>

</div>

Hatte ich von dieser Regel:

#center {
    margin: 0 auto;
}

Aber das Ergebnis ist:
Keine center-div-Element auf bootstrap 3

Oder ein anderes Beispiel, wie center diese:

<div id="center" class="container">
    <div class="row">
        <li class="col-md-5">
            <ul class="list-unstyled">
                <li><i class="icon-user"></i> aaaaaaaaa</li>
                <li><i class="icon-envelope"></i> bbbbbbbbbb</li>
                <li><i class="icon-envelopebug"></i> cccccccccccc</li>
            </ul>
        </li>
        <li class="col-md-5">
            <ul class="list-unstyled">
                <li><i class="icon-user"></i> aaaaaaaaa</li>
                <li><i class="icon-envelope"></i> bbbbbbbbbb</li>
                <li><i class="icon-envelopebug"></i> cccccccccccc</li>
            </ul>
        </li>
    </div>
</div>

Keine center-div-Element auf bootstrap 3

Danke für Eure Hilfe

InformationsquelleAutor Stéphane | 2013-09-26
  1. 10

    Um die Mitte ein block-level element mit Hilfe margin: 0 auto; es muss auch eine Breite, die kleiner ist als seine mit-block (für die auto Wert, um Sinn zu machen) - da #container ist überspannt die Breite des übergeordneten Elements (die <body>) es gibt einfach keine Marge zu verteilen.

    Eine alernative Ansatz margin: 0 auto; wäre, um .btn-toolbar zu inline-block und dann zentrieren Sie es durch hinzufügen text-align: center; seiner enthaltenden block. Sie können das gleiche Konzept zu dem zweiten Beispiel:

    http://fiddle.jshell.net/52VtD/94/

    • Vielen Dank, es funktioniert Super für die Schaltfläche, aber ich habe eine Frage mit der Liste. Wie ist es möglich, zu dem gleichen Ergebnis, aber ohne den zentrierten text 🙂 fiddle.jshell.net/52VtD/99
    InformationsquelleAutor Adrift
  2. 4

    In diesem Fall margin:0 auto funktioniert nicht, da die Breite des Elements ist 100%. Wenn Sie wollen, dass es funktioniert, würden Sie die Breite für das element:

    .btn-toolbar {
    width: 50px;
    margin: 0px auto;
}

    Wenn Sie wollen, zentrieren Sie den text und die Schaltfläche, die Sie hinzufügen könnte die Klasse text-center auf das Eltern-element, in diesem Fall: .row. Das styling für diese Klasse ist einfach text-align: center.

    <div class="row text-center">
  ..
</div>

    BEISPIEL HIER

    Als @Adrift Punkte aus, wäre es viel effizienter, die Mitte dem element, indem Sie es inline-block, als Sie verwenden können text-align:center im Gegensatz zu margin:0 auto vermeiden, um eine Feste Breite für das element. Dadurch wird sichergestellt, dass das element zentriert wird, unabhängig von dessen Breite. (Beispiel hier) - vergessen Sie nicht, Sie können einfach fügen Sie die Klasse text-center an die Eltern für die Zentrierung.

    Es ist auch erwähnenswert, dass inline/inline-block Elemente Achtung-Leerzeichen im markup, und so entsteht Raum, falls vorhanden. Wenn Sie möchten, entfernen Sie diesen Raum finden Sie diese Antwort.

    • Wie Sie schon sagt, habe ich die Lösung von @Adrift aber danke für die Erklärung 😉
    InformationsquelleAutor Josh Crozier
Schreibe einen Kommentar