在 Twitter Bootstrap 中将表格中的文本居中 [英] Centering text in a table in Twitter Bootstrap

问题描述

由于某种原因，表格内的文字仍未居中.为什么?如何将表格内的文本居中?

For some reason, The text inside the table still is not centered. Why? How do I center the text inside the table?

为了让它真正清楚:例如，我想要Lorem"坐在四个1"的中间.

To make it really Clear: For example, I want "Lorem" to sit in the middle of the four "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 的 text-align 设置为左​​对齐，而不是居中.

The .table td 's text-align is set to left, rather than center.

添加它应该使您的所有 td 居中:

Adding this should center all your tds:

.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

这篇关于在 Twitter Bootstrap 中将表格中的文本居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！