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

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

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

vertical-align: middle;

 

▼HTMLの修正箇所

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

↓↓↓↓↓↓

<td style=”width: 33.3333%; text-align: center; vertical-align: middle;“><span style=”color: #ff0000;”>スマホ選びのポイント</span></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エラー対策

 

PR記事一覧

 

Ads Blocker Image Powered by Code Help Pro

広告ブロックを検出しました!

ブラウザの拡張機能を使用して広告をブロックしていることが検出されました。

ブラウザの広告ブロッカーなどの機能を無効にして「更新」をクリックして下さい。