web-dev-qa-db-de.com

Bootstrap 4 - Liste zentrieren

Ich baue eine App mit der Beta von Bootstrap 4. Diese App ist im Moment sehr einfach und hat eine einzige Inline-Liste. Ich versuche, diese Liste horizontal in der Mitte des Bildschirms zu zentrieren. Wie in diesem Bootply gezeigt, dachte ich, justify-content-center würde es tun. Das hat aber nicht geklappt. Ich habe die anderen Zentrierklassen ausprobiert, die ich gesehen habe hier ohne Glück. Meine Liste sieht so 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 mit der Beta-Version von Bootstrap 4 eine Inline-Liste zentrieren?

csstwitter-bootstrapbootstrap-4
6
user687554

Verwenden Sie text-centerODER,

Verwenden Sie mx-auto in einem 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 funktioniert das Zentrieren in Bootstrap 4 ...

text-center wird für die Anzeige von Inline-Elementen verwendet

mx-auto (automatische x-Achsen-Ränder) zentriert die Anzeige: Block oder Anzeige: Flex-Elemente mit definierter Breite (%, vw, px usw.). Flexbox wird standardmäßig für Rasterspalten verwendet, daher gibt es auch verschiedene Zentriermethoden ...

Text oder Inline-Elemente zentrieren: 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-Anzeige: Block oder Anzeige: 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 können auch zentriert werden mit: mx-auto, da rowdisplay:flex ist

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

Demo Bootstrap 4 Horizontale Zentrierung

15
Zim

Wenn Sie Bootstrap-Klassen verwenden möchten, können Sie row verwenden.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <ul class="list-inline d-flex 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>

Ansonsten reicht Simply text-align:center aus.

ul.list-inline {
  text-align: center
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />

<div>
  <ul class="list-inline">
    <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>

2
Sankar

Sie müssen die Klasse text-center verwenden, die den Block tatsächlich mithilfe der text-align-Eigenschaft in bootstrap css im Bildschirm zentriert.

<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.

0
Nasir T

Verwenden Sie display:flex für ul, da justify-content-center mit Flexbox funktioniert

ul {
  display:flex;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<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>

0
Mukesh Ram