Bir önyükleme sütununda içerik nasıl ortalanır?

Sütunun içeriğini ortalamaya çalışıyorum. Benim için işe yarıyor gibi görünmüyor. İşte benim HTML’im:

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

JSFiddle Demo

Kullanım:

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

onun yerine

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

Ayrıca bootstrap 3 css'i de kullanabilirsiniz:

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

Bootstrap 4 artık içeriği ortalayacak esnek sınıflara sahip:

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

Varsayılan x-axisolarak flex-direction, olmadığı sürececolumn

Bu sorunun eski olduğunu biliyorum. Ve soru Bootstrap'ın hangi sürümünü kullandığından bahsetmedi. Bu yüzden bu sorunun cevabının çözüldüğünü varsayacağım.

Herhangi biriniz (benim gibi) bu soruya rastladıysa ve mevcut (2019) önyükleme çerçevesini kullanarak yanıt arıyorsanız, işte çözüm.

Önyükleme 4

d-flex justify-content-centerDiv sütununuzda kullanın . Bu, her şeyi o sütunun içinde ortalayacaktır.

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

Sütunun içinde metin varsa ve hepsini ortaya hizalamak istiyorsanız. Sadece text-centeraynı sınıfa ekleyin .

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

Bootstrap adlandırma kuralları kendi stillerini taşır; col-XS-1, içeren öğenin% 8,33'ü genişliğinde bir sütunu ifade eder. Metniniz büyük olasılıkla belirtilen genişliğin çok ötesine genişler ve içinde ortalanamaz. Div ile kısıtlanmasını istiyorsanız, css kelime sonu gibi bir şey kullanabilirsiniz.

Metnin ötesine genişleyecek kadar büyük bir öğe içinde içeriği ortalamak için iki seçeneğiniz vardır.

1. Seçenek: HTML Merkez Etiketi

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

Seçenek 2: CSS Metni Hizalama

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

Her şeyin sütunun genişliğiyle sınırlanmasını istiyorsanız

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

GÜNCELLEME - Bootstrap'in metin merkezi sınıfını kullanma

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

FlexBox Yöntemi

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

İşleri karmaşıklaştırmaya gerek yok. Bootstrap 4 ile margin auto sınıfını kullanarak öğeleri bir sütunun içinde yatay olarak hizalayabilirsiniz.my-auto

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

Bootstrap 4, flex box kullanarak içerikleri yatay ve dikey hizalayın

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

Bootstrap sınıfı align-items-center ve justify-content-center kullanın

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

text-centerBunun yerine kullanın center-block.

Veya center-blockyayılma öğesini kullanın (Hizalamayı daha iyi görebilmeniz için sütunu daha geniş yaptım):

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

Bu basit bir yol.

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

6 numaralı kontrol genişliği sütununun.

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

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

float:none; margin:auto;Sütun içeriğini ortalamak için stil ekleyebilirsiniz .