Inhalt des Bootstrap-Zeilencontainers zentrieren

Ich habe den code unten und ich möchte, um die Mitte der "guten" Elemente der äußeren "Zeile" div. Ich habe versucht, verschiedene Ansätze wie text-align: center (die nur zentriert den text und nicht die inneren DIV-Elemente.

Hier ist ein jsfiddle. Die Idee ist, dass ich eine Seite "gut" Fliesen und das nach 4 oder so packt es. Aber wenn es weniger als 4 sind, sollten Sie erscheinen auf der Seite zentriert.

<body class="container-fluid">
    <div class="row">
        <div class="well span2">
            <div class="row">
                <div class="span2">
                    Header
                </div>
            </div>
            <div class="row">
                <div class="span2">
                    Sub Header
                </div>
            </div>

        </div>

        <div class="well span2">
            <div class="row">
                <div class="span2">
                    Header
                </div>
            </div>
            <div class="row">
                <div class="span2">
                    Sub Header
                </div>
            </div>
        </div>
    </div>
</body>

InformationsquelleAutor der Frage Gregg | 2012-11-19

  1. 47

    Ich dies Problem gelöst, indem Sie Folgendes tun:

    <body class="container-fluid">
    <div class="row">
        <div class="span6" style="float: none; margin: 0 auto;">
           ....
        </div>
    </div>
</body>

    InformationsquelleAutor der Antwort Gregg

  2. 23

    Mit Bootstrap-4, gibt es eine css-Klasse, die speziell für diese. Die unten Zentrum-Reihe Inhalt:

    <div class="row justify-content-center">
  ...inner divs and content...
</div>

    Finden Sie unter: https://v4-alpha.getbootstrap.com/layout/grid/#horizontal-alignmentfür weitere Informationen.

    InformationsquelleAutor der Antwort Ayo I

  3. 9

    Versuchen Sie dieses, es funktioniert!

    <div class="row">
    <div class="center">
        <div class="col-xs-12 col-sm-4">
            <p>hi 1!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 2!</p>
        </div>
        <div class="col-xs-12 col-sm-4">
            <p>hi 3!</p>
        </div>
    </div>
</div>

    Dann in css definieren Sie die Breite des center-div-und center in einem Dokument:

    .center {
    margin: 0 auto;
    width: 80%;
}

    InformationsquelleAutor der Antwort Ezequiel

  4. 1

    Für die Bootstrap-4, verwenden Sie den folgenden code:

    <div class="mx-auto" style="width: 200px;">
  Centered element
</div>

    Ref: https://getbootstrap.com/docs/4.0/utilities/spacing/#horizontal-centering

    InformationsquelleAutor der Antwort Fakhruddin Ujjainwala

Schreibe einen Kommentar