web-dev-qa-db-fra.com

Comment centrer le contenu dans une colonne bootstrap?

J'essaie de centrer le contenu de la colonne. Ne semble pas que cela fonctionne pour moi. Voici mon HTML:

<div class="row">
   <div class="col-xs-1 center-block">
       <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
 </div>

Démo JSFiddle

htmlcsstwitter-bootstrap
58
Mark

Utilisation:

<!-- unsupported by HTML5 -->
<div class="col-xs-1" align="center">

au lieu de

<div class="col-xs-1 center-block">

Vous pouvez également utiliser bootstrap 3 css:

<div class="col-xs-1 text-center">
111
jake

Les conventions de dénomination de Bootstrap ont leurs propres styles, col-XS-1 désigne une colonne représentant 8,33% de la largeur de l'élément contenant. Votre texte s'étendrait probablement bien au-delà de la largeur spécifiée et ne pourrait pas être centré à l'intérieur. Si vous voulez que cela soit limité à la div, vous pouvez utiliser quelque chose comme css Word-break.

Pour centrer le contenu dans un élément suffisamment grand pour s'étendre au-delà du texte, vous avez deux options.

Option 1: balise centrale HTML

<div class="row">
  <div class="col-xs-1 center-block">
    <center>
      <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
    </center>
  </div>
</div>

Option 2: Alignement de texte CSS

<div class="row">
  <div class="col-xs-1 center-block" style="text-align:center;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

Si vous vouliez que tout soit contraint à la largeur de la colonne

<div class="row">
  <div class="col-xs-1 center-block" style="text-align:center;Word-break:break-all;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

UPDATE - Utilisation de la classe text-center de Bootstrap

<div class="row">
  <div class="col-xs-1 center-block text-center">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

Méthode FlexBox

<div class="row">
  <div class="flexBox" style="
    display: flex;
    flex-flow: row wrap;
    justify-content: center;">
    <span>aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
  </div>
</div>

http://jsfiddle.net/usth0kd2/13/

13
Sidriel

Utilisez text-center au lieu de center-block.

Ou utilisez center-block sur l'élément span (j'ai élargi la colonne pour que vous puissiez mieux voir l'alignement):

<div class="row">
   <div class="col-xs-10" style="background-color:#123;">
      <span class="center-block" style="width:100px; background-color:#ccc;">abc</span>
   </div>
</div>
6
cgalev

Bootstrap 4, aligner horizontalement et verticalement le contenu en utilisant flex box

<div class="page-hero d-flex align-items-center justify-content-center">
 <h1>Some text </h1>
</div>

Utilisez bootstrap class align-items-center et Just-Content-Center.

.page-hero {
  height: 200px;
  background-color: grey;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<div class="page-hero d-flex align-items-center justify-content-center">
  <h1>Some text </h1>
</div>
5
kiranvj

Pas besoin de compliquer les choses. Avec Bootstrap 4, vous pouvez simplement aligner des éléments horizontalement dans une colonne à l'aide de la classe de marge auto my-auto

         <div class="col-md-6 my-auto">
           <h3>Lorem ipsum.</h3>
         </div>
4
Chris Kelker

Je sais que cette question est ancienne. Et la question ne mentionnait pas quelle version de Bootstrap il utilisait. Je suppose donc que la réponse à cette question est résolue.

Si l'un d'entre vous (comme moi) est tombé sur cette question et a cherché une réponse à l'aide du cadre actuel (2019) bootstrap, alors voici la solution.

Bootstrap 4

Utilisez d-flex justify-content-center sur votre colonne div. Cela va tout centrer à l'intérieur de cette colonne.

<div class="row">
    <div class="col-4 d-flex justify-content-center">
        // Image
    </div>
</div>

Si vous avez du texte dans la colonne et que vous souhaitez aligner tout cela au centre. Ajoutez simplement text-center à la même classe.

<div class="row">
    <div class="col-4 d-flex justify-content-center text-center">
        // for image and text
    </div>
</div>
1
TheHive

col-lg-4 col-md-6 col-sm-8 col-11 mx-auto

 1. col-lg-4 ≥ 1200px (popular 1366, 1600, 1920+)
 2. col-md-6 ≥ 970px (popular 1024, 1200)
 3. col-sm-8 ≥ 768px (popular 800, 768)
 4. col-11 set default smaller devices for Gutter (popular 600,480,414,375,360,312)
 5. mx-auto = always block center
0
xicooc
//add this to your css
    .myClass{
          margin 0 auto;
          }

// add the class to the span tag( could add it to the div and not using a span  
// at all
    <div class="row">
   <div class="col-xs-1 center-block">
       <span class="myClass">aaaaaaaaaaaaaaaaaaaaaaaaaaa</span>
   </div>
 </div>
0
Eljeddi Oussema