☰

Twitter Bootstrapでテーブル内のテキストを中央揃えする 質問する

tag-icon • tag-icon 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

ベストアンサー1

Bootstrap 3 (3.0.3) では、要素"text-center"にクラスを追加するtdとすぐに機能します。

つまり、次のものはsome text表のセルの中央に配置されます。

<td class="text-center">some text</td>

おすすめ記事