在 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>父元素上。

根据这个问题，以下是为什么 text-center<thead>在应用于<table>元素时不影响的原因：

我们设置th { text-center: left; }，它比父类上的类更具体，从而防止标题单元格继承居中样式。虽然将.text-center课程直接放在<th>应该工作（在文档中确认）。

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