web-dev-qa-db-ja.com

Twitter Bootstrapのテーブル内のテキストの中央揃え

何らかの理由で、表の内側のテキストはまだ中央に配置されていません。どうして？テキストを表の中央に配置する方法

それを本当に明確にするために：例えば、私は4つの "1"の真ん中に "Lorem"を座らせたいです。 </s></s></s></s></s></s></s></s>

@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

twitter-bootstrap
99
Sven

.table tdのtext-alignはcenterではなくleftに設定されています。

これを追加すると、中央揃えになります。

.table td {
   text-align: center;   
}

@import url('http://Twitter.github.com/bootstrap/assets/css/bootstrap.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を更新しました

137
Tim

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

つまり、次のものはテーブルセルのsome textを中央に配置します。

<td class="text-center">some text</td>
155
Alex Che

私は誰が迅速かつクリーンな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>

<table> initタグを閉じて、あなたが望むところにコピーしてください:)私はそれが役に立つことを願っています

pSブートストラップv3.2.0

29
dbjoomla

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

    <td>
        <div class="text-center">
            My centered text
        </div>
    </td>
26
user2507821
<td class="text-center">

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

.text-center {
    text-align: center !important;
}
11
XAOPT

私は同じ問題を抱えていて、!importantを使わずにそれを解決するより良い方法は私のCSSで以下を定義することでした：

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

こうすることで、text-centerクラスの指定はテーブル内で正しく機能します。

5
VSP

追加：

<p class="text-center"> Your text here... </p>
5
Artem Zinoviev

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

4
Thoshi B

一度だけであれば、スタイルシートを変更してはいけません。その特定のtdを編集するだけです。

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

乾杯

4
Breno

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

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

そしてあなたのカスタムクラスで<td>の中にある<tr>sだけをcssに選択させます。

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

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

0
Peter Piper