[twitter-bootstrap] 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;">

건배