ブートストラップテーブルコンテンツの中心：データをより明確にします

ブートストラップテーブルコンテンツセンタリングのヒント：テキストセンタークラスを使用して、水平センタリングを実現します（テーブル中心のクラス名がTHおよびTD要素に適用されます）。 D-FlexおよびAlign-Items-Centerクラスを使用して、コンテンツを垂直に整列させ、Divの高さを行の高さ（テーブルの固定列高さの）に合わせて設定します。

ブートストラップテーブルコンテンツの中心：テーブルの読みやすさを向上させる

Bootstrapテーブルでは、センタリングコンテンツは、テーブルの読みやすさと美学を改善する効果的な方法です。 CSSスタイルを使用すると、テーブルのコンテンツを水平または垂直に簡単に集中できます。

水平にセンター

テーブルコンテンツを水平に中央に配置するには、 text-centerクラスを使用します。

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

次に、 <th> and <code><td>要素に適用します。<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">ログイン後にコピー</div></div> <p><strong>垂直中心</strong></p> <p>垂直センタリングテーブルコンテンツには、より多くのステップが必要です。</p> <ul><li>余分な<code><div>要素を作成し、 <code><th>または<code><td>でラップします。<li> <code>d-flexおよびalign-items-centerクラスをこの<div>要素に適用して、その内容を垂直に一致させます。<li> <code><div>の高さを、行の高さに合わせて設定します。<p>例えば：</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">ログイン後にコピー</div></div> <p>高さをカスタマイズするには、 <code>style="height: 50px;"の値を調整するだけです。 。

知らせ：

• 垂直センタリングは、固定列の高さのテーブルにのみ適しています。
• テーブルコンテンツに要素（ボタンや画像など）が含まれている場合は、適切なCSSルールを使用して、水平または垂直に中央に配置します。