부트스트랩 열에 콘텐츠를 중심에 맞추는 방법은?

부트스트랩 열에 콘텐츠를 중심에 맞추는 방법은?

칼럼의 중심을 잡으려고 합니다.저한테는 안 맞는 것 같네요.다음은 나의 HTML입니다.

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

JS Fiddle 데모

용도:

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

대신에

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

부트스트랩 3 cs를 사용할 수도 있습니다.

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

부트스트랩 4에는 이제 콘텐츠의 중심을 잡아줄 플렉스 클래스가 있습니다.

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

기본적으로 다음과 같습니다.x-axis~하지 않는 한flex-direction가column

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

---

이 질문은 오래된 것으로 알고 있습니다.그리고 그 질문은 그가 어떤 버전의 부트스트랩을 사용하고 있는지에 대해서는 언급하지 않았습니다.그래서 저는 이 질문에 대한 답이 해결되었다고 가정하겠습니다.

만약 여러분 중 (저와 같은) 이 질문을 우연히 발견하고 현재의 부트스트랩 5.0(2020) 및 4.5(2019) 프레임워크를 사용하여 답을 찾고 있다면, 여기 해결책이 있습니다.

부트스트랩 4.5, 5.0 및 5.1

사용하다d-flex justify-content-center당신의 칼럼 디브에.이렇게 하면 해당 열 안에 있는 모든 것의 중심이 잡힙니다.

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

텍스트를 콜 안쪽에 정렬하려면 다음을 사용합니다.text-center

<div class="row">
    <div class="col-4 text-center">
        // text only
    </div>
</div>

열 안에 텍스트와 이미지가 있는 경우 다음을 사용해야 합니다.d-flex justify-content-center그리고.text-center.

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

부트스트랩 명명 규칙은 고유의 스타일을 전달하며, col-XS-1은 열이 포함 요소의 8.33% 너비로 표시됩니다.텍스트는 지정된 너비를 훨씬 초과하여 확장될 가능성이 높으며 텍스트 내에서 중심을 잡을 수 없습니다.만약 당신이 그것이 디브에 구속되기를 원한다면, 당신은 CSS 단어-브레이크와 같은 것을 사용할 수 있습니다.

텍스트 이상으로 확장할 수 있을 정도로 큰 요소 내에 내용을 중심화하려면 두 가지 옵션이 있습니다.

옵션 1: HTML Center 태그

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

옵션 2: CSS 텍스트 정렬

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

모든 것이 열의 너비로 제한되도록 하려면

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

업데이트 - 부트스트랩의 text-center 클래스 사용

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

플렉스박스 방식

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

부트스트랩 4/부트스트랩 5, 플렉스 박스를 사용한 수평 및 수직 정렬 콘텐츠

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

부트스트랩 클래스 align-items-center 및 justice-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>

일을 복잡하게 만들 필요는 없습니다.Bootstrap 4를 사용하면 여백 자동 클래스를 사용하여 열 내부에 항목을 수평으로 정렬할 수 있습니다.my-auto

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

사용하다text-center대신에center-block.

아니면 사용center-block스판 요소(정렬을 더 잘 볼 수 있도록 열을 더 넓게 했습니다):

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

이것은 간단한 방법입니다.

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

숫자 6은 열의 너비를 조절합니다.

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

추가할 수 있습니다.float:none; margin:auto;열 내용의 중심을 맞추는 스타일입니다.

위의 어떤 작업도 수행되지 않으면(입력의 중심을 맞추려고 하는 경우와 같이) Boostrap 4 오프셋을 사용했습니다.

<div class="row">
    <div class="col-6 offset-3">
        <input class="form-control" id="myInput" type="text" placeholder="Search..">
    </div>
</div>  

언급URL : https://stackoverflow.com/questions/35163164/how-to-center-content-in-a-bootstrap-column