Bootstrap 열의 콘텐츠를 중앙에 배치하는 방법은 무엇입니까?

Question

열의 내용을 중앙에 맞추려고 합니다. 나에게는 효과가 없는 것 같습니다. 이것은 내 HTML입니다:

으아악

JSFiddle 데모

Answer 1

[2022년 4월 업데이트]: 테스트를 거쳐 5.1부트스트랩 버전이 포함되었습니다.

---

이 질문은 오래되었다는 것을 알고 있습니다. 그리고 질문에는 그가 어떤 버전의 Bootstrap을 사용하고 있는지 언급되지 않았습니다. 그래서 나는 이 질문에 대한 답이 이미 해결되었다고 가정합니다.

나 같은 사람이 우연히 이 질문을 발견하고 현재 부트스트랩 5.0(2020) 및 4.5(2019) 프레임워크를 사용하여 답변을 찾고 있다면 여기에 해결책이 있습니다.

부트로더 4.5, 5.0 및 5.1

열 div에 d-flex justify-content-center를 사용하세요. 그러면 해당 열의 모든 내용이 중앙에 배치됩니다.

으아악

열 내에서 텍스트를 정렬하려면 text-center

을 사용하세요. 으아악

열에 텍스트와 이미지가 있는 경우 d-flex justify-content-center 및 d-flex justify-content-center 和 text-center를 사용해야 합니다.

으아악

Answer 2

사용법:

으아악

대신

으아악

부트스트랩 3 CSS를 사용할 수도 있습니다:

으아악

Bootstrap 4에는 이제 콘텐츠 중앙에 Flex 클래스가 있습니다.

으아악

기본값은 x-axis，除非flex-direction是column

입니다.