Bootstrap table content centered: make data clearer

Bootstrap table content centering tips: Use the text-center class to achieve horizontal centering (table-centered class names are applied to th and td elements). Use the d-flex and align-items-center classes to align content vertically and set the div height to match row height (for tables with fixed row height).

Bootstrap table content centered: improve the readability of the table

In Bootstrap tables, centering content is an effective way to improve the readability and aesthetics of the table. CSS style allows you to easily center table content horizontally or vertically.

Center horizontally

To center the table content horizontally, use text-center class:

 <code class="css">.table-centered { text-align: center; }</code>

Then apply it to <th> and <code><td> elements:<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;table class=&quot;table-centered&quot;&gt; &lt;tr&gt; &lt;th&gt;头1&lt;/th&gt; &lt;th&gt;头2&lt;/th&gt; ... &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;数据1&lt;/td&gt; &lt;td&gt;数据2&lt;/td&gt; ... &lt;/tr&gt; &lt;/table&gt;&lt;/code&gt;</pre><div class="contentsignin">Copy after login</div></div> <p> <strong>Vertical centered</strong></p> <p> The vertical centering table content requires more steps:</p> <ul><li> Create an extra <code><div> element and wrap it in <code><th> or <code><td> .<li> Apply <code>d-flex and align-items-center classes to this <div> element to vertically match its contents.<li> Set the height of <code><div> to match the row height.<p> For example:</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> &lt;code class=&quot;html&quot;&gt;&lt;table&gt; &lt;tr&gt; &lt;th&gt; &lt;div class=&quot;d-flex align-items-center&quot; style=&quot;height: 50px;&quot;&gt;头1 &lt;/div&gt; &lt;/th&gt; ... &lt;/tr&gt; ... &lt;/table&gt;&lt;/code&gt;</pre><div class="contentsignin">Copy after login</div></div> <p> To customize the height, just adjust the value in <code>style="height: 50px;" .

Notice:

• Vertical centering is only suitable for tables with fixed row heights.
• If the table content contains elements (such as buttons or images), use the appropriate CSS rules to center it horizontally or vertically.