html - 在 Bootstrap 中居中表格标题文本

Question

我正在尝试将表格标题中的文本居中以与下面的文本对齐。我似乎无法让标题对齐。

<div class="container">
<div class="text-center">
    <h2>Lorem Ipsum</h2>
    <p>Lorem Ipsum
    </p>
    <div class="table-responsive">
        <table class="table table-striped">
        <thead>
        <tr>
            <th>Table Header 1
            </th>
            <th>Table Header 2
            </th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>Lorem Ipsum
            </td>
            <td>Lorem Ipsum
            </td>
        </tr>
        </tbody>
        </table>
    </div>
</div>

Answer 1

class="text-center"可以解决这个问题，但奇怪的是你需要定位 <th>元素直接而不是放在 <tr>父元素。

根据this question , 以下是为什么 text-center 不影响 <thead>当应用于 <table>元素:

We set th { text-center: left; }, which is more specific than the class on the parent and thus prevents the header cell from inheriting the centering styles. Putting the .text-center class directly on the <th> should work though (confirmed in the docs).

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="text-center">
    <h2>Lorem Ipsum</h2>
    <p>Lorem Ipsum
    </p>
    <div class="table-responsive">
      <table class="table table-striped table-bordered">
        <thead>
          <tr>
            <th class="text-center">Table Header 1
            </th>
            <th class="text-center">Table Header 2
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Lorem Ipsum
            </td>
            <td>Lorem Ipsum
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>