Bootstrap-4 - Mitte-Liste

Baue ich eine app mit der Bootstrap-4-beta. Diese app ist wirklich einfach in dem moment und hat einen einzigen inline-Liste. Ich versuche, die Mitte dieser Liste horizontal in der Mitte des Bildschirms. Wie in diesem Bootply, dachte ich justify-content-center würde es tun. Aber das hat nicht funktioniert. Ich habe versucht, die anderen Zentrierung-Klassen, die ich sah aufgelistet hier ohne Glück. Meine Liste sieht wie folgt aus:

<div>
  <ul class="list-inline justify-content-center">
    <li class="list-inline-item">Item 1</li>
    <li class="list-inline-item">Item 2</li>
    <li class="list-inline-item">Item 3</li>
    <li class="list-inline-item">Item 4</li>
    <li class="list-inline-item">Item 5</li>    
  </ul>
</div>

Wie kann ich den center zu einem inline-Prozess mit der Bootstrap-4 beta?

justify-content-center ist für display:flex Elemente

InformationsquelleAutor user687554 | 2017-08-16

Verwenden text-center ODER,

Verwenden mx-auto innerhalb einer flexbox-container (d-flex)..

https://www.bootply.com/6COUMfNrEU

<div class="d-flex">
  <ul class="list-inline mx-auto justify-content-center">
    <li class="list-inline-item">Item 1</li>
    <li class="list-inline-item">Item 2</li>
    <li class="list-inline-item">Item 3</li>
    <li class="list-inline-item">Item 4</li>
    <li class="list-inline-item">Item 5</li>    
  </ul>
</div>

, Wie die Zentrierung funktioniert in der Bootstrap-4...

text-center verwendet wird, für die display:inline-Elemente

mx-auto (automatische x-Achsen-Ränder) wird Mitte display:block oder display:flex-Elemente haben eine definierte Breite, (%, vw, px, etc..). Flexbox wird standardmäßig verwendet, auf der grid-Spalten, so gibt es auch verschiedene Zentrier-Methoden...

Center text oder inline-Elemente: text-center

<div class="container">
    <h1 class="text-center">i'm centered</h1>
    <div class="row">
        <div class="col text-center">i'm centered!</div>
    </div>
</div>

Center display:block oder display:flex: mx-auto

<div class="row">
    <div class="col-12">
        <img class="mx-auto d-block" src="//placehold.it/200x150?text=mx-auto">
    </div>
</div>

Spalten kann auch zentriert werden mit: mx-auto, weil row ist display:flex

<div class="row">
    <div class="col-4 mx-auto">
        <h6>I'm .col-4 centered</h6>
    </div>
</div>

Demo Bootstrap-4 Horizontale Zentrierung

InformationsquelleAutor Zim

Müssen Sie die Klasse text-center die eigentlich die Zentren der block in den Bildschirm mit der text-align Eigenschaft innerhalb der bootstrap-css.

<div>
   <ul class="list-inline text-center">
      <li class="list-inline-item">Item 1</li>
      <li class="list-inline-item">Item 2</li>
      <li class="list-inline-item">Item 3</li>
      <li class="list-inline-item">Item 4</li>
      <li class="list-inline-item">Item 5</li>    
   </ul>
</div>

Hoffe, das hilft.

InformationsquelleAutor Nasir T

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.