Tiêu đề trung tâm Bootstrap

93

Đây là trải nghiệm Twitter Bootstrap đầu tiên của tôi. Tôi đã thêm một số tiêu đề (h1, h2, v.v.) và chúng được căn chỉnh bên trái. Cách phù hợp để căn giữa tiêu đề là gì?

twitter-bootstrap

— SiberianGuy
nguồn

Bạn đang chứa các tiêu đề như thế nào? Bên trong một thùng chứa, giống như một pthẻ, hay lỏng lẻo?

— Andres Ilich

@AndresIlich, bên trong row-fluide (bên trong container-fluide)

— SiberianGuy

bạn đang muốn căn giữa tất cả các tiêu đề? hay chỉ một vài lựa chọn?

— Andres Ilich

@AndresIlich, tôi muốn đặt tất cả các tiêu đề ở giữa theo mặc định

— SiberianGuy

141

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

bootstrap đã thêm ba lớp css để căn chỉnh văn bản.

— Jinpu Hu
nguồn

68

chỉ sử dụng class = 'text-center' trong phần tử cho tiêu đề trung tâm.

<h2 class="text-center">sample center heading</h2>

sử dụng class = 'text-left' trong phần tử cho tiêu đề bên trái và sử dụng class = 'text-right' trong phần tử cho tiêu đề bên phải.

— Sadegh-khan
nguồn

29

Chỉ cần sử dụng "justify-content-center" trong thuộc tính lớp của hàng.

<div class="container">
  <div class="row justify-content-center">
    <h1>This is a header</h1>
  </div>
</div>

— Người Pháp
nguồn

2

Tại sao tất cả sự phức tạp này? Không <h1 class="text-center">chỉ đơn giản hơn, theo câu trả lời của Sadegh-khan ?

— Marco Sulla

Sử dụng điều này cho phép tiêu đề trở thành tập trung trong div khi sử dụng bootstrap mà việc sử dụng trung tâm văn bản không làm được. Nó làm cho tiêu đề xuất hiện ở giữa màn hình, đó là những gì tôi đã nhắm đến.

— a.norman

11

Theo nhận xét của bạn, để căn giữa tất cả các tiêu đề, tất cả những gì bạn phải làm là thêm text-align:centervào tất cả chúng cùng một lúc, như sau:

CSS

    h1, h2, h3, h4, h5, h6 {
        text-align: center;
    }

— Andres Ilich
nguồn

1

Mặc dù đúng, ý tưởng đằng sau việc sử dụng twitter bootstrap là sử dụng các lớp hiện có càng nhiều càng tốt. Xem câu trả lời bằng cách Jinpu Hồ

— Skurpi

@Skurpi Frameworks hoạt động như những gợi ý về những gì bạn có thể sử dụng trong một dự án; Họ không có nghĩa là một cho trước. Mặc dù đơn giản hơn để sử dụng các lớp và kiểu đã được cung cấp trong bootstrap, nhưng nếu các yêu cầu của dự án của bạn "yêu cầu" bạn thực hiện một số thay đổi mạnh mẽ đối với khung, theo câu hỏi của OP, thì cách đơn giản nhất để thực hiện là chỉ cần sửa đổi những thay đổi đó tại cấp độ gốc. Trái ngược với việc thêm hàng đống lớp mà bạn thực sự không cần.

— Andres Ilich

@Skurpi Hơn nữa, những lớp căn chỉnh đó không tồn tại vào thời điểm viết bài. Câu trả lời này là một năm tuổi.

— Andres Ilich

Ilich Bạn đang phải, không nhìn vào ngày của câu hỏi này khi tôi đến đây

— Skurpi

5

Bootstrap đi kèm với nhiều lớp xây dựng trước và một trong số đó là class="text-left". Vui lòng gọi lớp này bất cứ khi nào cần. :-)

— Tinsae
nguồn