부트 스트랩 열에 콘텐츠를 중앙에 배치하는 방법은 무엇입니까?

부트 스트랩 열에 콘텐츠를 중앙에 배치하는 방법은 무엇입니까?

---

칼럼의 내용을 가운데로 맞추려고합니다. 나를 위해 작동하지 않는 것 같습니다. 내 HTML은 다음과 같습니다.

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

JSFiddle 데모

---

사용하다:

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

대신에

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

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

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

---

부트 스트랩 명명 규칙은 고유 한 스타일을 전달합니다. col-XS-1은 포함하는 요소 너비의 8.33 % 인 열을 나타냅니다. 귀하의 텍스트는 지정된 너비를 훨씬 넘어서 확장 될 가능성이 높으며 그 안에서 중앙에 배치 될 수 없습니다. div로 제한하려면 css word-break와 같은 것을 사용할 수 있습니다.

텍스트를 넘어서 확장 할 수있을만큼 큰 요소 내에서 콘텐츠를 중앙에 배치하려면 두 가지 옵션이 있습니다.

옵션 1 : HTML 센터 태그

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

업데이트-Bootstrap의 텍스트 센터 클래스 사용

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

FlexBox 방법

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

---

Use text-center instead of center-block.

Or use center-block on the span element (I did the column wider so you can see the alignment better):

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

---

Bootstrap 4, horizontal and vertical align contents using flex box

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

Use bootstrap class align-items-center and justify-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>

---

No need to complicate things. With Bootstrap 4, you can simply align items horizontally inside a column using the margin auto class my-auto

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

---

I know this question is old. And the question did not mentioned which version of Bootstrap he was using. So i'll assume the answer to this question is resolved.

If any of you (like me) stumbled upon this question and looking for answer using current (2019) bootstrap framework, then here's the solution.

Bootstrap 4

Use d-flex justify-content-center on your column div. This will center everything inside that column.

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

If you have text inside the column, and you want to align all that to center. Just add text-center to the same class.

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

---

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

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