blocks|key|513015|text|<td+class="text-center">|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|513016|并在bootstrap.css中修复.text-center：|unstyled|513017|.text-center+{
++++text-align:+center+!important;
}|513018|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>&lt;td class="text-center"&gt;
</code></pre>

<p>and fix .text-center in bootstrap.css:</p>

<pre><code>.text-center {
    text-align: center !important;
}
</code></pre>


blocks|key|296586|text|您可以在不更改css的情况下，通过在单元格中添加一个带有"text-center“类的div来使td对齐：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|296587|++++<td>
++++++++<div+class="text-center">
++++++++++++My+centered+text
++++++++</div>
++++</td>|code-block|syntax|javascript|296588|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can make td's align without changing the css by adding a div with a class of "text-center" inside the cell:</p>

<pre><code>    &lt;td&gt;
        &lt;div class="text-center"&gt;
            My centered text
        &lt;/div&gt;
    &lt;/td&gt;
</code></pre>


blocks|key|296604|text|Bootstrap的一个主要特性是它减少了!important标签的使用。使用上面的答案会违背目的。您可以通过修改自己的css文件中的类并在包含引导css后链接它，轻松地定制引导程序。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|296605|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>One of the main feature of Bootstrap is that it alleviates the use of !important tag.
Using the above answer would defeat the purpose. You can easily customise bootstrap by modifying the classes in your own css file and linking it after including the boostrap css.</p>


blocks|key|296624|text|添加：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|296625|<p+class="text-center">+Your+text+here...+</p>|code-block|syntax|javascript|296626|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>add:</p>

<pre><code>&lt;p class="text-center"&gt; Your text here... &lt;/p&gt;
</code></pre>


blocks|key|296656|text|在Bootstrap3+(3.0.3)中，向td元素添加"text-center"类可以开箱即用。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|296657|即，表格单元格中的以下中心位置some+text：|296658|<td+class="text-center">some+text</td>|code-block|syntax|javascript|296659|entityMap^0|M|2|S|D|0|F|9|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>In Bootstrap 3 (3.0.3) adding the <code>"text-center"</code> class to a <code>td</code> element works out of the box.</p>

<p>I.e., the following centers <code>some text</code> in a table cell:</p>

<pre><code>&lt;td class="text-center"&gt;some text&lt;/td&gt;
</code></pre>


blocks|key|296681|text|我也有同样的问题，一个不使用!important的更好的解决方法是在我的CSS中定义以下内容：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|296682|table+th.text-center,+table+td.text-center+{+
++++text-align:+center;
}|code-block|syntax|javascript|296683|这样，text-center类的细节就可以在表中正确工作。|296684|entityMap^0|E|A|0|0|3|B|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

<p>I had the same problem and a better way to solve it without using <code>!important</code> was defining the following in my CSS:</p>

<pre><code>table th.text-center, table td.text-center { 
    text-align: center;
}
</code></pre>

<p>That way the specifity of the <code>text-center</code> class works correctly in tables.</p>


blocks|key|513198|text|如果只有一次，你不应该改变你的样式表。只需编辑特定td即可|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|513199|<td+style="text-align:+center;">|code-block|syntax|javascript|513200|干杯|513201|entityMap^0|P|2|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|T|8|@]|D|@]|E|$]]]|N|$]]

<p>If it's just once, you shouldn't alter your style sheet.
Just edit that particular <code>td</code>:</p>

<pre><code>&lt;td style="text-align: center;"&gt;
</code></pre>

<p>Cheers</p>


blocks|key|296723|text|我认为谁是最好的html和Css的组合，快速和干净的mod是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|296724|<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>|code-block|syntax|javascript|296725|关闭<table>初始化标记，然后将其复制到您想要的位置:)我希望它能派上用场，祝您在stackoverflow中过得愉快|offset|length|style|CODE|296726|附注：Bootstrap+v3.2.0|296727|entityMap^0|0|0|2|7|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

<p>I think who the best mix for html &amp; Css for quick and clean mod is :</p>

<pre><code>&lt;table class="table text-center"&gt;
&lt;thead&gt;
        &lt;tr&gt;                    
        &lt;th class="text-center"&gt;Uno&lt;/th&gt;
        &lt;th class="text-center"&gt;Due&lt;/th&gt;
        &lt;th class="text-center"&gt;Tre&lt;/th&gt;
        &lt;th class="text-center"&gt;Quattro&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
    &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt;
        &lt;td&gt;2&lt;/td&gt;
        &lt;td&gt;3&lt;/td&gt;
        &lt;td&gt;4&lt;/td&gt;
    &lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>close the <code>&lt;table&gt;</code> init tag then copy where you want :)
I hope it can be useful 
Have a good day
w stackoverflow</p>

<p>p.s. Bootstrap v3.2.0</p>


blocks|key|296751|text|只需给周围的<tr>一个自定义类，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|296752|<tr+class="custom_centered">
++<td>1</td>
++<td>2</td>
++<td>3</td>
</tr>|code-block|syntax|javascript|296753|并且让css只选择包含您的自定义类的<tr>中的<td>。|296754|tr.custom_centered+td+{
++text-align:+center;
}|296755|这样，您就不会冒险覆盖其他表或甚至覆盖引导基类(就像我的一些前辈建议的那样)。|296756|entityMap^0|6|4|0|0|I|4|O|4|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|12|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|R|$]]

<p>just give the surrounding <code>&lt;tr&gt;</code> a custom class like: </p>

<pre><code>&lt;tr class="custom_centered"&gt;
  &lt;td&gt;1&lt;/td&gt;
  &lt;td&gt;2&lt;/td&gt;
  &lt;td&gt;3&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

<p>and have the css only select <code>&lt;td&gt;</code>s that are inside an <code>&lt;tr&gt;</code> with your custom class.</p>

<pre><code>tr.custom_centered td {
  text-align: center;
}
</code></pre>

<p>like this you don't risk to override other tables or even override a bootstrap base class (like some of my predecessors suggested). </p>


<p>For some reason, The text inside the table still is not centered. Why? How do I center the text inside the table?</p>
<p>To make it really Clear: For example, I want &quot;Lorem&quot; to sit in the middle of the four &quot;1&quot;.
​</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
table,
thead,
tr,
tbody,
th,
td {
  text-align: center;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="table"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;1&lt;/th&gt;
      &lt;th&gt;1&lt;/th&gt;
      &lt;th&gt;1&lt;/th&gt;
      &lt;th&gt;1&lt;/th&gt;
      &lt;th&gt;2&lt;/th&gt;
      &lt;th&gt;2&lt;/th&gt;
      &lt;th&gt;2&lt;/th&gt;
      &lt;th&gt;2&lt;/th&gt;
      &lt;th&gt;3&lt;/th&gt;
      &lt;th&gt;3&lt;/th&gt;
      &lt;th&gt;3&lt;/th&gt;
      &lt;th&gt;3&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td colspan="4"&gt;Lorem&lt;/td&gt;
      &lt;td colspan="4"&gt;ipsum&lt;/td&gt;
      &lt;td colspan="4"&gt;dolor&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>
<p><a href="http://jsfiddle.net/JeCpZ/" rel="noreferrer">JSFiddle</a></p>


Centering text in a table in Twitter Bootstrap

由于某些原因，表格中的文本仍然没有居中。为什么？如何在表格中居中显示文本？说得很清楚:例如，我希望"Lorem“坐在四个"1”的中间。​​@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');table,thead,tr,...

问在Twitter Bootstrap中居中显示表格中的文本
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Twitter Bootstrap中居中显示表格中的文本EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在Twitter Bootstrap中居中显示表格中的文本
EN