127

何らかの理由で、テーブル内のテキストはまだ中央に配置されていません。なんで？テーブル内のテキストを中央に配置するにはどうすればよいですか？

明確にするために：たとえば、「Lorem」を4つの「1」の真ん中に配置します。</ p> 

@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

4

10 に答える 10

194

Bootstrap 3（3.0.3）では、"text-center"クラスをtd要素に追加すると、すぐに使用できます。

some textつまり、テーブルセル内の次のセンター：

<td class="text-center">some text</td>
于 2014-02-17T14:36:45.447 に答える
163

の.table tdtext-alignは、中央ではなく左に設定されます。

これを追加すると、すべてが中央に配置されますtd。

.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

于 2012-07-26T21:33:24.633 に答える
37

迅速でクリーンなmodのためのhtmlとCssの最適な組み合わせは誰だと思います：

<table class="table text-center">
<thead>
        <tr>                    
        <th class="text-center">Uno</th>
        <th class="text-center">Due</th>
        <th class="text-center">Tre</th>
        <th class="text-center">Quattro</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</tbody>
</table>

initタグを閉じて、<table>好きな場所にコピーしてください:)お役に立てば幸いです。

ps Bootstrap v3.2.0

于 2014-07-30T12:00:25.797 に答える
32

セル内に「text-center」のクラスを持つdivを追加することにより、cssを変更せずにtdを整列させることができます。

    <td>
        <div class="text-center">
            My centered text
        </div>
    </td>
于 2013-06-21T06:14:21.433 に答える
17 
<td class="text-center">

bootstrap.cssの.text-centerを修正します。

.text-center {
    text-align: center !important;
}
于 2013-06-04T12:00:46.907 に答える
8

一度だけの場合は、スタイルシートを変更しないでください。その特定を編集するだけですtd：

<td style="text-align: center;">

乾杯

于 2014-05-09T15:30:41.070 に答える
6

私は同じ問題を抱えていましたが、使用せずにそれを解決するためのより良い方法!importantは、CSSで次のように定義することでした。

table th.text-center, table td.text-center { 
    text-align: center;
}

そうすれば、text-centerクラスの特異性がテーブルで正しく機能します。

于 2014-02-24T09:12:07.327 に答える
4

Bootstrapの主な機能の1つは、！importantタグの使用を軽減することです。上記の答えを使用すると、目的が無効になります。独自のcssファイルのクラスを変更し、boostrap cssを含めた後でそれをリンクすることにより、ブートストラップを簡単にカスタマイズできます。

于 2013-09-24T13:16:20.520 に答える
4

追加：

<p class="text-center"> Your text here... </p>
于 2013-12-07T16:37:55.520 に答える
1

<tr>次のようなカスタムクラスを周囲に与えるだけです。

<tr class="custom_centered">
  <td>1</td>
  <td>2</td>
  <td>3</td>
</tr>

そして、cssにカスタムクラス<td>の内部にあるsのみを選択させる。<tr>

tr.custom_centered td {
  text-align: center;
}

このように、他のテーブルをオーバーライドしたり、ブートストラップ基本クラスをオーバーライドしたりするリスクはありません（私の前任者の一部が提案したように）。

于 2017-05-16T12:42:23.953 に答える