부트 스트랩 중심 제목

93

내 첫 트위터 부트 스트랩 경험입니다. 일부 제목 (h1, h2 등)을 추가했으며 왼쪽으로 정렬됩니다. 제목을 가운데에 맞추는 올바른 방법은 무엇입니까?

twitter-bootstrap

— 시베리아
소스

제목을 어떻게 포함하고 있습니까? p태그 와 같은 컨테이너 내부 또는 느슨한?

— Andres Ilich 2012-06-22

(내부 용기 fluide이다) @AndresIlich, 행 fluide 내부

— SiberianGuy

모든 제목을 중앙에 배치하려고합니까? 아니면 몇 가지만 선택 하시겠습니까?

— Andres Ilich 2012-06-22

@AndresIlich, 나는 모든 제목을 갖고 싶어은 기본적으로 중심

— SiberianGuy

141

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

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

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

부트 스트랩은 텍스트 정렬을 위해 세 개의 CSS 클래스를 추가했습니다.

— 후진 푸
소스

68

가운데 제목을 위해 요소에서 class = 'text-center'를 사용하십시오.

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

왼쪽 제목에는 요소에 class = 'text-left'를 사용하고 오른쪽 제목에는 요소에 class = 'text-right'를 사용하십시오.

— 사데 그칸
소스

29

행의 클래스 속성에서 "justify-content-center"를 사용하십시오.

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

— Jufrench
소스

2

왜 이렇게 복잡할까요? Sadegh-khan의 대답에<h1 class="text-center"> 따라 더 간단 하지 않습니까?

— Marco Sulla

이를 사용하면 text-center를 사용하지 않은 부트 스트랩을 사용할 때 헤더가 div에 중앙 집중화 될 수 있습니다. 내가 겨냥한 화면 중앙에 헤더가 나타나게합니다.

— a.norman

11

귀하의 의견에 따라 모든 제목을 중앙에 배치하려면 다음과 같이 모든 제목을 text-align:center동시에 추가 하면됩니다.

CSS

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

— 안드레스 일리치
소스

1

사실이지만 트위터 부트 스트랩을 사용하는 아이디어는 가능한 한 기존 클래스를 사용하는 것입니다. Jinpu 후으로 대답을 참조하십시오

— Skurpi

@Skurpi 프레임 워크는 프로젝트에서 사용할 수있는 것에 대한 제안으로 작동합니다. 그들은 결코 주어진 것이 아닙니다. 부트 스트랩에 이미 제공된 클래스와 스타일을 사용하는 것이 더 간단하지만 프로젝트의 요구 사항이 "필요한 경우"OP의 질문에 따라 프레임 워크를 크게 변경해야합니다. 가장 간단한 방법은 변경 사항을 다음 위치에서 수정하는 것보다 루트 수준. 정말로 필요하지 않은 수업을 추가하는 것과는 대조적입니다.

— Andres Ilich 2013 년

@Skurpi 게다가 이러한 정렬 클래스 는 작성 당시 존재하지 않았습니다 . 이 답변은 1 년 전입니다.

— Andres Ilich 2013 년

Ilich 당신이 바로,이 질문의 날짜에 보이지 않았다 나는 여기에 도착하는 경우

— Skurpi

5

부트 스트랩은 많은 사전 빌드 클래스와 함께 제공되며 그중 하나는 class="text-left". 필요할 때마다이 클래스를 호출하십시오. :-)

— 틴새
소스