Hoe kan ik inhoud centreren in een bootstrap-kolom?

Ik probeer de inhoud van de kolom te centreren. Ziet er niet naar uit dat het voor mij werkt. Hier is mijn HTML:

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

JSFiddle-demo

Antwoord 1, autoriteit 100%

Gebruik:

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

in plaats van

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

Je kunt ook bootstrap 3 css gebruiken:

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

Bootstrap 4 heeft nu flexklassen die de inhoud centreren:

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

Houd er rekening mee dat het standaard x-axisis, tenzij flex-directioncolumn

is

Antwoord 2, autoriteit 41%

[Bijgewerkt december 2020]:Getest en inbegrepen 5.0versie van Bootstrap.

Ik weet dat deze vraag oud is. En de vraag vermeldde niet welke versie van Bootstrap hij gebruikte. Dus ik ga ervan uit dat het antwoord op deze vraag is opgelost.

Als een van jullie (zoals ik) deze vraag struikelde en op zoek is naar antwoord met behulp van de huidige bootstrap 5.0 (2020) en 4,5 (2019) kader, dan is hier de oplossing.

Bootstrap 4.5 en 5.0

Gebruik d-flex justify-content-centerop uw kolom DIV. Dit zal alles in die kolom centreren.

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

Als u de tekst in de COL wilt uitlijnen, gebruikt u text-center

<div class="row">
    <div class="col-4 text-center">
        // text only
    </div>
</div>

Als u tekst en afbeelding in de kolom hebt, moet u d-flexjustify-content-centeren text-centergebruiken .

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

Antwoord 3, Autoriteit 10%

Bootstrap Naming Conventions Carry Carry-stijlen van hun eigen, COL-XS-1 verwijst naar een kolom die 8,33% van het bevattende element breed is. Uw tekst, zou hoogstwaarschijnlijk ver boven de opgegeven breedte uitzetten en kan er niet mogelijk worden gecentreerd. Als je dat wilde om te beperken tot de div, zou je iets als CSS-woord-pauze kunnen gebruiken.

Voor het centreren van de inhoud in een element dat groot genoeg is om buiten de tekst uit te breiden, hebt u twee opties.

Optie 1: HTML Center Tag

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

Optie 2: CSS Text-Align

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

Als u wilt dat alles beperkt blijft tot de breedte van de kolom

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

UPDATE – De tekstcentrumklasse van Bootstrap gebruiken

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

Antwoord 4, autoriteit 8%

Bootstrap 4/Bootstrap 5, horizontaal en verticaal uitlijnen van inhoud met behulp van flexbox

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

Gebruik bootstrap class align-items-centeren rechtvaardig -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>

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

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

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

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

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

<div class="row">
    <div class="col-6 offset-3">
        <input class="form-control" id="myInput" type="text" placeholder="Search..">
    </div>
</div>