Twitter Bootstrap에서 표 중앙에 텍스트 배치

어떤 이유로 표 안의 텍스트는 여전히 가운데에 있지 않습니다. 왜? 표 안의 텍스트를 어떻게 중앙에 배치합니까?

명확하게하기 위해 : 예를 들어 "Lorem"이 4 개의 "1"중간에 위치하기를 원합니다.

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}

<table class="table">
  <thead>
    <tr>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4">Lorem</td>
      <td colspan="4">ipsum</td>
      <td colspan="4">dolor</td>
    </tr>
  </tbody>
</table>

JSFiddle

.table td오히려 중앙보다 왼쪽으로의 텍스트 정렬이 설정됩니다.

이것을 추가하면 모든 것이 중앙에 있어야합니다 td.

.table td {
   text-align: center;   
}

@import url('https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css');
table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}

.table td {
  text-align: center;
}

<table class="table">
  <thead>
    <tr>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>1</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>2</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
      <th>3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td colspan="4">Lorem</td>
      <td colspan="4">ipsum</td>
      <td colspan="4">dolor</td>
    </tr>
  </tbody>
</table>

업데이트 된 JSFIDDLE

Bootstrap 3 (3.0.3) "text-center"에서는 td요소에 클래스를 추가 하는 즉시 작동합니다.

즉, some text테이블 셀 의 다음 센터 :

<td class="text-center">some text</td>

빠르고 깔끔한 모드를위한 html & Css의 가장 좋은 조합은 다음과 같습니다.

<table class="table text-center">
<thead>
        <tr>                    
        <th class="text-center">Uno</th>
        <th class="text-center">Due</th>
        <th class="text-center">Tre</th>
        <th class="text-center">Quattro</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</tbody>
</table>

<table>init 태그를 닫고 원하는 곳에 복사하십시오 :) 유용 할 수 있기를 바랍니다.

ps 부트 스트랩 v3.2.0

셀 내부에 "text-center"클래스가있는 div를 추가하여 CSS를 변경하지 않고 td를 정렬 할 수 있습니다.

    <td>
        <div class="text-center">
            My centered text
        </div>
    </td>

<td class="text-center">

bootstrap.css에서 .text-center를 수정하십시오.

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

나는 동일한 문제가 있었고 사용하지 않고 그것을 해결하는 더 나은 방법 !important은 내 CSS에서 다음을 정의하는 것이었다.

table th.text-center, table td.text-center { 
    text-align: center;
}

이렇게하면 text-center클래스 의 특수성이 테이블에서 올바르게 작동합니다.

한 번이면 스타일 시트를 변경하면 안됩니다. 특정 편집 td:

<td style="text-align: center;">

건배

Bootstrap의 주요 기능 중 하나는! important 태그의 사용을 완화한다는 것입니다. 위의 답변을 사용하면 목적이 무효화됩니다. 자체 css 파일의 클래스를 수정하고 boostrap css를 포함시킨 후 링크하여 부트 스트랩을 쉽게 사용자 정의 할 수 있습니다.

더하다:

<p class="text-center"> Your text here... </p>

주변에 <tr>다음과 같은 사용자 정의 클래스를 제공하십시오 .

<tr class="custom_centered">
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>

CSS 가 사용자 정의 클래스와 함께 <td>안에있는 s 만 선택 <tr>하도록합니다.

tr.custom_centered td {
  text-align: center;
}

이렇게하면 다른 테이블을 재정의하거나 부트 스트랩 기본 클래스를 재정의 할 위험이 없습니다 (내 전임자가 제안한 일부).