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，以下是文本中心在应用于<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>

在Bootstrap中居中表头文本

1 个答案: