Wie zentriere ich Inhalte in einer Bootstrap-Spalte?

Ich versuche, den Inhalt der Spalte zu zentrieren. Sieht nicht so aus, als würde es bei mir funktionieren. Hier ist mein HTML:

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

JSFiddle Demo

Verwenden:

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

anstatt

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

Sie können auch Bootstrap 3 CSS verwenden:

<!-- recommended method -->
<div class="col-xs-1 text-center">

Bootstrap 4 verfügt jetzt über Flex-Klassen, die den Inhalt zentrieren:

<div class="d-flex justify-content-center">
   <div>some content</div>
</div>

Beachten Sie, dass dies standardmäßig der Fall ist, x-axissofern dies nicht der Fall flex-directionistcolumn

Ich weiß, dass diese Frage alt ist. In der Frage wurde nicht erwähnt, welche Version von Bootstrap er verwendete. Ich gehe also davon aus, dass die Antwort auf diese Frage gelöst ist.

Wenn einer von Ihnen (wie ich) über diese Frage gestolpert ist und mit dem aktuellen Bootstrap-Framework (2019) nach einer Antwort gesucht hat, dann ist hier die Lösung.

Bootstrap 4

Verwenden Sie d-flex justify-content-centerauf Ihrer Spalte div. Dadurch wird alles in dieser Spalte zentriert.

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

Wenn Sie Text in der Spalte haben und all dies auf die Mitte ausrichten möchten. Fügen Sie einfach text-centerder gleichen Klasse hinzu.

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

Bootstrap-Namenskonventionen enthalten eigene Stile. Col-XS-1 bezieht sich auf eine Spalte, die 8,33% des enthaltenen Elements enthält. Ihr Text würde höchstwahrscheinlich weit über die angegebene Breite hinausragen und könnte nicht darin zentriert werden. Wenn Sie möchten, dass es sich auf das Div beschränkt, können Sie so etwas wie CSS-Wortumbruch verwenden.

Um den Inhalt in einem Element zu zentrieren, das groß genug ist, um über den Text hinaus zu expandieren, haben Sie zwei Möglichkeiten.

Option 1: HTML Center-Tag

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

Option 2: CSS-Textausrichtung

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

Wenn Sie möchten, dass sich alles auf die Breite der Spalte beschränkt

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

UPDATE - Verwenden der Textcenter-Klasse von Bootstrap

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

FlexBox-Methode

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

Keine Notwendigkeit, Dinge zu komplizieren. Mit Bootstrap 4 können Sie Elemente mithilfe der automatischen Randklasse einfach horizontal innerhalb einer Spalte ausrichtenmy-auto

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

Bootstrap 4, horizontal und vertikal, richten den Inhalt mithilfe der Flexbox aus

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

Verwenden Sie die Bootstrap-Klasse Align-Items-Center und Justify-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>

Verwenden Sie text-centeranstelle von center-block.

Oder verwenden Sie center-blockdas span-Element (ich habe die Spalte breiter gemacht, damit Sie die Ausrichtung besser sehen können):

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

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

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

Dies ist ein einfacher Weg.

<div class="row">
  <div class="col-md-6 mx-auto">
    <p>My text</p>
  </div>
</div>

Die Zahl 6 steuert die Breite der Spalte.

Sie können float:none; margin:auto;Stile hinzufügen, um den Spalteninhalt zu zentrieren.