부트 스트랩 중심 제목


93

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


제목을 어떻게 포함하고 있습니까? 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>

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". 필요할 때마다이 클래스를 호출하십시오. :-)

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.