Làm thế nào để căn giữa nội dung trong một cột bootstrap?

Tôi đang cố gắng căn giữa nội dung của cột. Có vẻ như nó không phù hợp với tôi. Đây là HTML của tôi:

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

JSFiddle Demo

Sử dụng:

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

thay vì

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

Bạn cũng có thể sử dụng bootstrap 3 css:

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

Bootstrap 4 hiện có các lớp flex sẽ tập trung vào nội dung:

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

Lưu ý rằng theo mặc định nó sẽ được x-axistrừ flex-directionlàcolumn

Tôi biết câu hỏi này đã cũ. Và câu hỏi không đề cập đến phiên bản Bootstrap mà anh ta đang sử dụng. Vì vậy, tôi sẽ giả sử câu trả lời cho câu hỏi này đã được giải quyết.

Nếu bất kỳ ai trong số các bạn (như tôi) tình cờ gặp câu hỏi này và đang tìm kiếm câu trả lời bằng cách sử dụng khung bootstrap hiện tại (2019), thì đây là giải pháp.

Bootstrap 4

Sử dụng d-flex justify-content-centertrên div cột của bạn. Điều này sẽ căn giữa mọi thứ bên trong cột đó.

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

Nếu bạn có văn bản bên trong cột và bạn muốn căn chỉnh tất cả văn bản đó vào giữa. Chỉ cần thêm text-centervào cùng một lớp.

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

Quy ước đặt tên Bootstrap mang các phong cách của riêng chúng, col-XS-1 đề cập đến một cột có chiều rộng là 8,33% phần tử chứa. Văn bản của bạn, rất có thể sẽ mở rộng ra ngoài chiều rộng được chỉ định và không thể căn giữa nó. Nếu bạn muốn nó ràng buộc vào div, bạn có thể sử dụng một cái gì đó như css word-break.

Để căn giữa nội dung trong một phần tử đủ lớn để mở rộng ra ngoài văn bản, bạn có hai tùy chọn.

Tùy chọn 1: Thẻ trung tâm HTML

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

Tùy chọn 2: Căn chỉnh văn bản CSS

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

Nếu bạn muốn mọi thứ giới hạn chiều rộng của cột

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

CẬP NHẬT - Sử dụng lớp trung tâm văn bản của Bootstrap

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

Phương pháp 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/

Không cần phải phức tạp hóa mọi thứ. Với Bootstrap 4, bạn chỉ cần căn chỉnh các mục theo chiều ngang bên trong một cột bằng cách sử dụng lớp tự động lềmy-auto

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

Bootstrap 4, nội dung căn chỉnh ngang và dọc bằng cách sử dụng hộp flex

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

Sử dụng bootstrap class align-items-center và 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>

Sử dụng text-centerthay vì center-block.

Hoặc sử dụng center-blocktrên phần tử span (tôi đã làm cột rộng hơn để bạn có thể nhìn thấy sự liên kết tốt hơn):

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

Đây là một cách đơn giản.

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

Các số 6 kiểm soát các chiều rộng của cột.

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

Bạn có thể thêm float:none; margin:auto;kiểu để tập trung nội dung cột.