วิธีจัดกึ่งกลางเนื้อหาในคอลัมน์ bootstrap

ฉันพยายามจัดเนื้อหาของคอลัมน์ให้อยู่กึ่งกลาง ดูเหมือนจะไม่เหมาะกับฉัน นี่คือ HTML ของฉัน:

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

JSFiddle สาธิต

ใช้:

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

แทน

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

คุณยังสามารถใช้ bootstrap 3 css:

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

Bootstrap 4 มีคลาสดิ้นที่จะเน้นเนื้อหา:

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

โปรดทราบว่าโดยค่าเริ่มต้นจะเป็นx-axisเว้นแต่flex-directionจะเป็นcolumn

[อัปเดตธันวาคม 2020]:5.0 Bootstrap เวอร์ชันทดสอบและรวม

ฉันรู้ว่าคำถามนี้เก่าแล้ว และคำถามไม่ได้ระบุว่าเขาใช้ Bootstrap เวอร์ชันใด ดังนั้นฉันจะถือว่าคำตอบสำหรับคำถามนี้ได้รับการแก้ไขแล้ว

หากพวกคุณคนใดคนหนึ่ง (เช่นฉัน) สะดุดกับคำถามนี้และกำลังมองหาคำตอบโดยใช้เฟรมเวิร์ก bootstrap 5.0 (2020) และ 4.5 ​​(2019) ปัจจุบันนี่คือวิธีแก้ปัญหา

Bootstrap 4.5 และ 5.0

ใช้d-flex justify-content-centerกับ div คอลัมน์ของคุณ สิ่งนี้จะจัดกึ่งกลางทุกอย่างภายในคอลัมน์นั้น

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

หากคุณต้องการจัดแนวข้อความภายในคอลัมน์ให้ใช้ text-center

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

หากคุณมีข้อความและรูปภาพภายในคอลัมน์ที่คุณจำเป็นต้องใช้และd-flex justify-content-centertext-center

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

หลักการตั้งชื่อ Bootstrap มีรูปแบบของตัวเอง col-XS-1 หมายถึงคอลัมน์ที่มีความกว้าง 8.33% ขององค์ประกอบที่มี ข้อความของคุณมีแนวโน้มที่จะขยายออกไปไกลเกินกว่าความกว้างที่ระบุและไม่สามารถอยู่กึ่งกลางภายในได้ ถ้าคุณต้องการให้มัน จำกัด อยู่ที่ div คุณสามารถใช้ css word-break

สำหรับการจัดกึ่งกลางเนื้อหาภายในองค์ประกอบที่มีขนาดใหญ่พอที่จะขยายเกินข้อความคุณมีสองตัวเลือก

ตัวเลือกที่ 1: HTML Center Tag

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

ตัวเลือกที่ 2: CSS Text-Align

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

หากคุณต้องการให้ทุกอย่าง จำกัด ความกว้างของคอลัมน์

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

UPDATE - ใช้คลาส text-center ของ Bootstrap

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

วิธี 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/

ไม่ต้องซับซ้อนอะไรมากมาย ด้วย Bootstrap 4 คุณสามารถจัดแนวรายการในแนวนอนภายในคอลัมน์โดยใช้คลาสอัตโนมัติระยะขอบmy-auto

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

Bootstrap 4 เนื้อหาจัดแนวแนวนอนและแนวตั้งโดยใช้กล่องดิ้น

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

ใช้คลาส bootstrap align-items-centerและ 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>

ใช้text-centerแทนcenter-block.

หรือใช้center-blockกับองค์ประกอบช่วง (ฉันทำให้คอลัมน์กว้างขึ้นเพื่อให้คุณเห็นการจัดตำแหน่งได้ดีขึ้น):

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

จำนวน 6ตัวควบคุมความกว้างของคอลัมน์

//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;สไตล์เพื่อจัดเนื้อหาคอลัมน์ให้อยู่กึ่งกลาง

หากไม่ได้ผลข้างต้น (เช่นในกรณีของฉันที่พยายามจัดศูนย์อินพุต) ฉันใช้ Boostrap 4 offset:

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