web-dev-qa-db-fra.com

Bootstrap 4 - Liste du centre

Je construis une application avec la version bêta de Bootstrap 4. Cette application est vraiment basique pour le moment et ne possède qu'une seule liste en ligne J'essaie de centrer cette liste horizontalement au milieu de l'écran. Comme indiqué dans ce Bootply , je pensais que justify-content-center le ferait. Cependant, cela n'a pas fonctionné. J'ai essayé les autres cours de centrage que j'ai vus énumérés ici sans aucune chance. Ma liste ressemble à ceci:

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

Comment centrer une liste en ligne avec Bootstrap 4 beta?

csstwitter-bootstrapbootstrap-4
6
user687554

Utilisez text-centerOU,

Utilisez mx-auto dans un conteneur flexbox (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>

Comment centrer fonctionne dans Bootstrap 4 ...

text-center est utilisé pour l'affichage: éléments en ligne

mx-auto (marges de l’axe des x auto) centrera l’affichage: bloc ou affichage: flex des éléments ayant une largeur définie (%, vw, px, etc.) Flexbox est utilisé par défaut sur les colonnes de la grille, il existe donc diverses méthodes de centrage ...

Centrer le texte ou les éléments en ligne: 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>

Affichage central: blocage ou affichage: 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>

Les colonnes peuvent également être centrées avec: mx-auto, car row est display:flex

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

Démo Bootstrap 4 Centrage Horizontal

15
Zim

Si vous souhaitez utiliser les classes d'amorçage, vous pouvez utiliser row

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

Sinon, simplement text-align:center suffit.

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

Vous devez utiliser la classe text-center qui centre réellement le bloc dans l'écran en utilisant la propriété text-align dans 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>

J'espère que cela t'aides.

0
Nasir T

Utilisez display:flex pour ul car justify-content-center fonctionne avec flexbox

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