【WordPress】テーブルセル内のテキスト文字を上下中央にHTMLやCSSで寄せる方法【ブログサイトのデザイン】

こちらの記事では、WordPressのテーブル内のテキスト文字を上下中央に寄せる方法について解説しています。

テーブルセル内の縦列は中央寄せに簡単にできますが、初期状態ではセルの横列が上下の真ん中に寄らず、上や下のどちらかに偏るので見た目が悪くなってしまいます。

そこで今回は、HTMLで記事ごとに揃えるやり方や、CSSでサイトの全ページ揃えるやり方を紹介します。

テーブル内を上下中央寄せ

テキスト文字を上下揃えるやり方

テーブルのセル内にあるテキスト文字を上下中央寄せにするやり方は簡単です。

上下中央寄せにしたいセルのHTMLに「vertical-align: middle;」を追記するだけで出来ます。

vertical-align: middle;

上下中央に寄らないパターン

	iPhone	Android
スマホ選びのポイント	セキュリティ面で強いおしゃれなケースが多い Macとの同期が簡単	リーズナブルな価格機種端末が豊富テレビを見ることができる

例として「スマホ選びのポイント」の部分が上下中央に寄らないパターンを修正してみます。

編集画面をビジュアルからテキスト画面に切り替えましょう。

▼テーブルのHTML

<tbody>
<tr>
<td style=”width: 33.3333%; text-align: center;”></td>
<td style=”width: 33.3333%; text-align: center;”>iPhone</td>
<td style=”width: 33.3333%; text-align: center;”>Android</td>
</tr>
<tr>
<td style=”width: 33.3333%; text-align: center;”>スマホ選びのポイント</td>
<td style=”width: 33.3333%;”>
<ul>
<li>セキュリティ面で強い</li>
<li>おしゃれなケースが多い</li>
<li>Macとの同期が簡単</li>
</ul>
</td>
<td style=”width: 33.3333%;”>
<ul>
<li>リーズナブルな価格</li>
<li>機種端末が豊富</li>
<li>テレビを見ることができる</li>
</ul>
</td>
</tr>
</tbody>
</table>

上下中央寄せにしたい部分を分かりやすいように赤字にしておきました。

それでは、赤字の部分に「vertical-align: middle;」を付け加えてみましょう。

vertical-align: middle;

▼HTMLの修正箇所

<td style=”width: 33.3333%; text-align: center;”>スマホ選びのポイント</td>

↓↓↓↓↓↓

<td style=”width: 33.3333%; text-align: center; vertical-align: middle;“>スマホ選びのポイント</td>

上下中央寄せにしたい部分に「vertical-align: middle;」を入れたので、上下中央に寄っているパターンをビジュアル画面で見てみましょう。

上下中央に寄っているパターン

	iPhone	Android
スマホ選びのポイント	セキュリティ面で強いおしゃれなケースが多い Macとの同期が簡単	リーズナブルな価格機種端末が豊富テレビを見ることができる

該当するテーブルセルの部分に「vertical-align: middle;」を入れることで、上下中央寄せにすることができました。

※今後、当サイトの設定によって見た目が変わる可能性有り

サイト内をCSSで一括設定

HTMLで設定するのが面倒くさい方や、サイト全体をCSSで一括設定したい方は、下記のCSSを「追加CSS」に入力しましょう。

table tbody td{
vertical-align:middle;
}

赤字部分は、使用しているテーマやテーブルの設定によって変わることがあるので、分からない方はデベロッパーツールで確認してみましょう。

▶デベロッパーツールのキー

Web制作

ウェブ制作関連記事
ブログサイトの始め方	ドメイン取得方法
ドメイン取得～サイト作成手順	外観テーマ導入手順
おすすめレンタルサーバー	おすすめテーマ
記事内容(ジャンル)の選び方	SSL化の設定方法
固定ページをトップページ変更	おすすめプラグイン一覧
サイト運営者ID確認	効率化ショートカットキー
不要なCSS・JS特定	ホームページの作り方
スパムコメント対策

▼Googleアナリティクス

Googleアナリティクス関連記事
複数サイト管理方法	旧バージョン(UA)設定

Googleアドセンス・アフィリエイト

Googleアドセンス関連記事
アドセンス設置場所	広告単価の高い時期
広告クリック率確認	広告サイズ改善
アンカー広告の固定化	広告が表示されない原因
ads.txtファイル問題の修正	ダブルレクタングル作成
リクエスト処理エラー	Amazonアソシエイト
おすすめASP一覧	【クローズドASP】felmat依頼内容

サイトデザイン

関連記事
TOPページの割り当て	padding設定方法
margin設定方法	border設定方法
記事上の余白原因と消し方	スマホ余白の原因と消し方
特定カテゴリー非表示	perタグ内の改行方法
▶が文字化けする原因対策	サイドバーのずれ修正
コメント欄に絵文字	サイドバータイトル非表示
CSSが反映されない原因	テーブル文字を上下中央揃え

▼テーマ毎のデザイン

THE THOR (ザ・トール)
アイキャッチ画像を非表示	グローバルメニューの出し方

エラー対策

エラー対策の関連記事
style.cssエラー	functions.phpエラー
画面表示がおかしい対処法	重大なエラー対処法
サーバーでプラグイン削除	エラーコード一覧
404エラー対策	ー