株式会社オートプロジェクト

Columnコラム
  • TOP
  • コラム一覧
  • リンクテキストや画像が垂直方向に動かない場合に試してほしいこと
2024年3月1日
リンクテキストや画像が垂直方向に動かない場合に試してほしいこと

今回は、リンクテキストや画像(インライン要素)が垂直方向に動かない場合(vertical-alignが効かない時)に試してほしいことを紹介します。

vertical-alignとは

インライン要素、テーブルセルに垂直方向の配置を指定できるプロパティです。

効かない原因

  1. 指定している箇所が親要素に指定している

    こちらは、親要素に継承はしないので、親要素に指定しても動かしたい子要素は動きません。動かしたい要素に指定しましょう。

  2. インライン要素ではなく、ブロック要素になっている、または、初めからブロック要素に指定してる

    インライン要素からブロック要素の指定をしている、または、最初からブロック要素の場合は効きません。

ブロック要素をインライン要素にするには、display:inlineを指定すればいいのですが、高さが効かなくなる点については以下の方法で効くようになります。

display: table-cell;
vertical-align: middle;
height:90px;

※高さや、vertical-alignの値は任意の値にしてください。

Webコーディング、デザイナーの方へ
オートプロジェクトでは、TEGARU(テガル)というテーマ販売サービスを行っております。企業や飲食店など、業種ごとに特化したデザインで安価に提供していますので、予算の限られたお客様への提案にぜひご利用ください。

▶ 初めてのWebサイトに最適!テンプレートで簡単に作ることができる、各業種に特化したWordPressテーマ「TEGARU(テガル)」